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


Posted in Javascript onFebruary 08, 2021

前言

这篇来记录下最近工作中遇到的一个问题,在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 滚动条滑动到锚点的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js replace 与replaceall实例用法详解
Aug 03 Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
jquery操作checkbox实现全选和取消全选
May 02 Javascript
express的中间件basicAuth详解
Dec 04 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载(二)
Jun 22 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 Javascript
ssm+vue前后端分离框架整合实现(附源码)
Jul 08 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
Ajax获取node服务器数据的完整步骤
Sep 20 Javascript
详解Vue的七种传值方式
Feb 08 #Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
Feb 08 #Javascript
js 执行上下文和作用域的相关总结
Feb 08 #Javascript
微信小程序tab左右滑动切换功能的实现代码
Feb 08 #Javascript
用Javascript实现发送短信验证码间隔功能
Feb 08 #Javascript
原生js 实现表单验证功能
Feb 08 #Javascript
js面向对象封装级联下拉菜单列表的实现步骤
Feb 08 #Javascript
You might like
PHP中获取时间的下一周下个月的方法
2014/03/18 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
Prototype使用指南之selector.js
2007/01/10 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
获取body标签的两种方法
2011/10/13 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
javascript两种function的定义介绍及区别说明
2013/05/02 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
js实现模糊匹配功能
2017/02/15 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
vue项目首屏加载时间优化实战
2019/04/23 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
three.js 将图片马赛克化的示例代码
2020/07/31 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
python字符串对其居中显示的方法
2015/07/11 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
世界著名的顶级牛排:Omaha Steak(奥马哈牛排)
2016/09/20 全球购物
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
《小草和大树》教学反思
2014/02/16 职场文书
自行车广告词大全
2014/03/21 职场文书
市场营销工作计划书
2014/05/06 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
确保工程质量承诺书
2015/04/29 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
党支部意见范文
2015/06/02 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python
Python超详细分步解析随机漫步
2022/03/17 Python