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 相关文章推荐
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
Dec 29 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
vuex 实现getter值赋值给vue组件里的data示例
Nov 05 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 Javascript
使用vue实现HTML页面生成图片的方法
Mar 12 Javascript
nuxt 服务器渲染动态设置 title和seo关键字的操作
Nov 05 Javascript
ES6字符串的扩展实例
Dec 21 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php中apc缓存使用示例
2013/12/25 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
mac系统下为 php 添加 pcntl 扩展
2016/08/28 PHP
php实现文件上传及头像预览功能
2017/01/15 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
createElement动态创建HTML对象脚本代码
2008/11/24 Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
2014/06/20 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
JS 实现 ajax 异步浏览器兼容问题
2017/01/21 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
vue数字类型过滤器的示例代码
2017/09/07 Javascript
vue项目优化之通过keep-alive数据缓存的方法
2017/12/11 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
python迭代器实例简析
2014/09/25 Python
Linux下安装python3.6和第三方库的教程详解
2018/11/09 Python
Pandas中resample方法详解
2019/07/02 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
大专生简历的自我评价
2013/11/26 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
什么是就业协议书
2014/04/17 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js