• 前言

这篇来记录下最近工作中遇到的一个问题，在app原生和前端h5混合开发的过程中，其中一个页面是选择城市列表的页面，类似于美团饿了么城市选择，银行app中银行列表选择，通讯录中快速定位到联系人选择的锚点位置等这样的功能，作为刚入门不久的我来说，感觉这个功能还是有一点压力。下面我来分享一下我所查到的一些实现方法。

  • 什么是锚点问题

对于pc端网页来说，常见的网页右侧的回到顶部按钮，点击直接跳转到网页最上面，就是锚点的实现；

对于移动端来说，打开你手机的通讯录，点击右侧的字母，页面直接跳转到对应字母的联系人，这也是锚点的实现。

  • 常见的解决方法

1.<a>标签中href属性设置为跳转元素的id的值

　　<style>

        #mydiv{

            height: 1200px;

            width: 100%;

            background-color: pink;

            position: relative;

        }

        a{

            position: absolute;

            top: 1000px;

            left: 1000px;

        }

 　　</style>

    <div id="mydiv">

        我是网页顶部

    </div>

    <a href="#mydiv">回到顶部</a>

上面的办法相当于设置一个超链接，a标签直接跳转，但是这样回改变浏览器地址栏中的地址，感觉不太实用

2.原生js获取滚动条位置，并作出改变scrollTop

　　<style>

        body{

            position: relative;

        }

        h1{

            margin: 0 auto;

        }

        .mybtn1{

            position: fixed;

            left: 200px;

            top: 500px;

        }

        .mybtn2{

            position: fixed;

            left: 200px;

            top: 550px;

        }

    </style>

　　<body>

   　　 <h1 id="topH1">1</h1>

    　　<h1>2</h1>

    　　<h1>3</h1>

    　　<h1>4</h1>

    　　<h1>5</h1>

    　　<h1>6</h1>

   　　 <h1>7</h1>

   　　 <h1>1</h1>

    　　<h1>2</h1>

   　　 <h1>3</h1>

   　　 <h1>4</h1>

   　　 <h1>5</h1>

    　　<h1>6</h1>

    　　<h1>7</h1>

   　　 <h1>1</h1>

    　　<h1>2</h1>

    　　<h1>3</h1>

    　　<h1>4</h1>

    　　<h1>5</h1>

    　　<h1>6</h1>

   　　 <h1 id="tobtmH1">7</h1>

    <button class="mybtn1"   onclick="toTop()">回到顶部</button>

   <script>

      function toTop(){

        var topH1 = document.getElementById("topH1")

        document.documentElement.scrollTop=topH1.offsetTop

        window.pageYOffset=topH1.offsetTop

        document.body.scrollTop=topH1.offsetTop ;

      }

   </script>

　　</body>

这种方法就是给按钮添加点击事件，触发点击事件后改变滚动条位置，但是这种办法需要处理兼容型问题比较麻烦，pc端移动端亲测有效。

3.element.scrollIntoview使得滚动条根据视图发生变化

<style>

        body{

            position: relative;

        }

        .mydiv{

            margin-top: 100px;

           border: 1px solid pink;

        }

        h1{

            margin: 0 auto;

        }

        .mybtn1{

            position: fixed;

            left: 200px;

            top: 500px;

        }

        .mybtn2{

            position: fixed;

            left: 200px;

            top: 550px;

        }

</style>

<body>

    <div class="mydiv">

    <h1 id="topH1">1</h1>

    <h1>2</h1>

    <h1>3</h1>

    <h1>4</h1>

    <h1>5</h1>

    <h1>6</h1>

    <h1>7</h1>

    <h1>1</h1>

    <h1>2</h1>

    <h1>3</h1>

    <h1>4</h1>

    <h1>5</h1>

    <h1>6</h1>

    <h1>7</h1>

    <h1>1</h1>

    <h1>2</h1>

    <h1>3</h1>

    <h1>4</h1>

    <h1>5</h1>

    <h1>6</h1>

    <h1 id="tobtmH1">7</h1>

</div>

    <button class="mybtn1"   onclick="toTop()">回到顶部</button>

    <button class="mybtn2"  onclick="toBtm()">去到底部</button>

   <script>

       window.onload=function(){

       }

    //  调用方法为element.scrollIntoview()

    //参数为true时，页面或者容器发生滚动，使得element的顶部与视图容器顶部对齐

    //参数为false时，使得element的底部与视图容器底部对齐

       function toTop(){

           var  topH1 = document.getElementById('topH1')

            topH1.scrollIntoView(true)

       }

       function toBtm() {

            var  tobtmH1 = document.getElementById('tobtmH1')

            tobtmH1.scrollIntoView(false)

       }

   </script>

</body>

上面这种方法是将锚点跳转到视图的顶部或者底部，没有太多弊端，pc端移动端亲测有效。

  • 进阶的解决方法

进阶的方法就是调用第三发插件better-scroll，这种方法还没有亲测，查看资料也没有太多的坑，需要的自己添加使用下。

以上就是我要介绍的全部内容了，希望对看到的人有些许帮助，有错误还请指正，谢谢啦！！如果觉得还不错，请点下关注一起成长啦！

js--获取滚动条位置，并实现页面滑动到锚点位置的更多相关文章

  1. js判断滚动条是否已到页面最底部或顶部实例

    原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...

  2. js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox

    做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...

  3. 使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置

    使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...

  4. JS获取滚动条距离顶部高度

    一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); ...

  5. js获取滚动条的位置

    页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body ...

  6. 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect

    getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...

  7. JS判断滚动条到底部，页面是否有滚动条

    要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...

  8. js获取浏览器上一访问页面URL地址，document.referrer方法

    如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...

  9. js获取滚动条的宽度

    function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...

随机推荐

  1. Hangfire&Autofac与ASP.NET CORE注入失败

    Hangfire.Autofac与ASP.NET CORE注入失败 项目里面使用了Hangfire,因为之前没用过吧,遇到了个问题,就是使用了ico容器后,再用Hangfire总是注入不上对象,总是后 ...

  2. 【JSOI2019】精准预测（2-SAT & bitset）

    Description 现有一台预测机,可以预测当前 \(n\) 个人在 \(T\) 个时刻内的生死关系.关系有两种: \(\texttt{0 t x y}\):如果 \(t\) 时刻 \(x\) 死 ...

  3. java.lang.UnsupportedOperationException: Unable to create instance of org.fisco.bcos.web3j.abi.datatypes.generated.Int256

    Contract Address : 0x967f92adc229b77dda64b42af21ea1ff1b0702eb Unable to create instance of org.fisco ...

  4. 微信端video去除最顶层播放

    https://x5.tencent.com/tbs/guide/video.html 给video标签添加属性 x5-video-player-type="h5"

  5. 容器编排系统之Kubectl工具的基础使用

    前文我们了解了k8s的架构和基本的工作过程以及测试环境的k8s集群部署,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/14126750.html:今天我们主要来 ...

  6. Greenplum 性能优化之路 --（三）ANALYZE

    一.为什么需要 ANALYZE 首先介绍下 RBO 和 CBO,这是数据库引擎在执行 SQL 语句时的2种不同的优化策略. RBO(Rule-Based Optimizer) 基于规则的优化器,就是优 ...

  7. 图解Janusgraph系列-图数据底层序列化源码分析（Data Serialize）

    图解Janusgraph系列-图数据底层序列化源码分析(Data Serialize) 大家好,我是洋仔,JanusGraph图解系列文章,实时更新~ 图数据库文章总目录: 整理所有图相关文章,请移步 ...

  8. 详解Java中的IO输入输出流！

    目录 本片要点 基本分类 发展史 文件字符流 输出的基本结构 流中的异常处理 异常处理新方式 读取的基本结构 运用输入与输出完成复制效果 文件字节流 缓冲流 字符缓冲流 装饰设计模式 转换流(适配器) ...

  9. js上 七、表达式

    (1).什么是表达式 任何有值的内容都是表达式 一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如a=3中的3就是一个表达式,a=3整体也可以作为一个表达式. 常见表达式有如下几种: ü 原 ...

  10. 百测学习之postman-接口测试

    一.postman的请求 1.url与uri的区别   url与uri的区别   http://doc.nnzhp.cn/          http+host(域名)+path路径(uri) 2.g ...