JavaScript 获取滚动条位置并将页面滑动到锚点

更新时间：2021年02月08日 15:39:51 作者：丶Serendipity丶

这篇文章主要介绍了JavaScript 获取滚动条位置并将页面滑动到锚点的的相关资料，帮助大家更好的理解和学习使用JavaScript，感兴趣的朋友可以了解下

前言

这篇来记录下最近工作中遇到的一个问题，在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" rel="external nofollow" >回到顶部</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，这种方法还没有亲测，查看资料也没有太多的坑，需要的自己添加使用下。

以上就是JavaScript 获取滚动条位置并将页面滑动到锚点的详细内容，更多关于JavaScript 滚动条滑动到锚点的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js锚点、操作滚动条滑动scroll代码演示

JavaScript提升性能的常用技巧总结【经典】
这篇文章主要介绍了JavaScript提升性能的常用技巧,结合实例形式总结分析了JavaScript编程中常见的性能提升优化技巧,涉及作用域、循环、变量、DOM及函数节流等,非常具有实用价值,需要的朋友可以参考下
2016-06-06
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
这篇文章主要介绍了JS实现滑动菜单效果代码,以实例形式实现了包括Tab,选项卡,横向等效果,非常简单实用,需要的朋友可以参考下
2015-09-09
JS 实现获取打开一个界面中输入的值
JS 实现获取打开一个界面中输入的值，需要的朋友可以参考一下
2013-03-03
Bootstrap Table的使用总结
这篇文章主要介绍了Bootstrap Table的使用小结，本文介绍的非常详细，具有参考借鉴价值，感兴趣的朋友一起看看吧
2016-10-10
JavaScript编写实现飞机大战
这篇文章主要为大家详细介绍了JavaScript编写实现飞机大战，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-05-05
json格式数据的添加，删除及排序方法
这篇文章主要介绍了json格式数据的添加，删除及排序方法,结合实例形式分析了针对一维数组与二维数组的json格式数据进行增加、删除与排序的实现技巧,需要的朋友可以参考下
2016-01-01
Babylon使用麦克风并处理常见问题解决
这篇文章主要为大家介绍了Babylon使用麦克风并处理常见问题解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
JS将数字转换成三位逗号分隔的样式(示例代码)
本篇文章主要是对JS将数字转换成三位逗号分隔的样式(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
微信小程序如何同时获取用户信息和用户手机号
小程序登录是现在小程序里面很普遍的一个功能,因为官方提供的方法,可以一键获取到用户信息,一键拿到手机号,这篇文章主要给大家介绍了关于微信小程序如何同时获取用户信息和用户手机号的相关资料,需要的朋友可以参考下
2021-08-08
薪资那么高的Web前端必看书单
由于前端开发的火热和一些IT巨头公司对 web前端开发人员的需求旺盛，让越来越多的人转入前端。今天就为大家分享了一份Web前端开发书单，希望大家喜欢
2017-10-10