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">回到顶部</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 = ElementById("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{
element表格横向滚动条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>
}
//  调⽤⽅法为element.scrollIntoview()
//参数为true时，页⾯或者容器发⽣滚动，使得element的顶部与视图容器顶部对齐
//参数为false时，使得element的底部与视图容器底部对齐
function toTop(){
var  topH1 = ElementById('topH1')
topH1.scrollIntoView(true)
}
function toBtm() {
var  tobtmH1 = ElementById('tobtmH1')
tobtmH1.scrollIntoView(false)
}
</script>
</body>
上⾯这种⽅法是将锚点跳转到视图的顶部或者底部，没有太多弊端，pc端移动端亲测有效。
进阶的解决⽅法
进阶的⽅法就是调⽤第三发插件better-scroll，这种⽅法还没有亲测，查看资料也没有太多的坑，需要的⾃⼰添加使⽤下。总结
以上就是我要介绍的全部内容了，希望对看到的⼈有些许帮助，有错误还请指正，谢谢啦！！如果觉得还不错，请点下关注⼀起成长啦！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。