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点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
采用call方式实现js继承
May 20 Javascript
javascript实现表单验证
Jan 29 Javascript
jQuery的 $.ajax防止重复提交的两种方法(推荐)
Oct 14 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
微信小程序 二维码canvas绘制实例详解
Jan 06 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
Node.js 实现简单的接口服务器的实例代码
May 23 Javascript
基于JS实现前端压缩上传图片的实例代码
May 14 Javascript
Bootstrap table 服务器端分页功能实现方法示例
Jun 01 Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 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编程中八种常见的文件操作方式
2006/11/19 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
PHP随机生成信用卡卡号的方法
2015/03/23 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
List Installed Software Features
2007/06/11 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
2013/06/24 Javascript
javascript对JSON数据排序的3个例子
2014/04/12 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript的原型继承详解
2015/02/15 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
jquery 获取select数组与name数组长度的实现代码
2016/06/20 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
jquery append与appendTo方法比较
2017/05/24 jQuery
vue中倒计时组件的实例代码
2018/07/06 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
js实现鼠标拖拽div左右滑动
2020/01/15 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
Vue实现购物车基本功能
2020/11/08 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
Python读取表格类型文件代码实例
2020/02/17 Python
详解Python IO口多路复用
2020/06/17 Python
Python 如何反方向迭代一个序列
2020/07/28 Python
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
创业计划书的主要内容有哪些
2014/01/29 职场文书
政府采购方案
2014/06/12 职场文书
村党的群众路线教育实践活动总结材料
2014/10/31 职场文书
男人帮观后感
2015/06/18 职场文书