js--获取滚动条位置，并实现页面滑动到锚点位置
- 前言
这篇来记录下最近工作中遇到的一个问题，在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 = 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，这种方法还没有亲测，查看资料也没有太多的坑，需要的自己添加使用下。
以上就是我要介绍的全部内容了，希望对看到的人有些许帮助，有错误还请指正，谢谢啦！！如果觉得还不错，请点下关注一起成长啦！
js--获取滚动条位置，并实现页面滑动到锚点位置的更多相关文章
- js判断滚动条是否已到页面最底部或顶部实例
原文 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法.分享给大家供大家参考.具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐 ...
- js获取滚动条距离浏览器顶部,底部的高度,兼容ie和firefox
做web开发经常会碰到需要获取浏览器的滚动条与顶部和底部的距离,然后做相应的处理动作.下面作者就如何通过js来获取浏览器滚动条距离浏览器顶部和底部的高度做一下分享,这个是同时兼容ie和firefox的 ...
- 使用锚点定位不改变url同时平滑的滑动到锚点位置，不会生硬的直接到锚点位置
使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...
- JS获取滚动条距离顶部高度
一.jQuery获取的相关方法 jquery 获取滚动条高度 获取浏览器显示区域的高度 : $(window).height(); 获取浏览器显示区域的宽度 : $(window).width(); ...
- js获取滚动条的位置
页面具有 DTD,或者说指定了 DOCTYPE 时,使用 document.documentElement. 页面不具有 DTD,或者说没有指定了 DOCTYPE,时,使用 document.body ...
- 原生js获取 一个dom元素距离页面可视区域的位置值 -- getBoundingClientRect
getBoundingClientRect() 这个方法返回一个矩形对象,包含四个属性:left.top.right和bottom.分别表示元素各边与页面上边和左边的距离. var box=docum ...
- JS判断滚动条到底部，页面是否有滚动条
要判断页面滚动条是否到底,需要了解三个属性: scrollHeight:获取元素内容高度的度量,包括由于溢出导致的视图中不可见内容,说直白点,算上了滚动条不可见的那部分高度. clientHeight ...
- js获取浏览器上一访问页面URL地址，document.referrer方法
如题,可用document.referrer方法获取上一页面的url 但是也有不可使用的情况 直接在浏览器地址栏中输入地址: 使用location.reload()刷新(location.href或者 ...
- js获取滚动条的宽度
function getScrollWidth() { var noScroll, scroll, oDiv = document.createElement("DIV"); oD ...
随机推荐
- django 删除数据库表后重新同步的方法
python manage.py sqlmigrate your_app_name 0001 把your_app_name换成自己的app名字即可看到框架自动生成的创建表sql语句,于是我就这样看到了 ...
- python-列表list和元组tuple
list Python内置的一种数据类型是列表:list.list是一种有序的集合,可以随时添加和删除其中的元素. 比如,列出班里所有同学的名字,就可以用一个list表示: >>> ...
- Java进阶学习之集合与泛型（1）
目录 1.集合 1.1.集合是什么 1.2.集合框架结构 1.2.1.Collection 1.2.2.Map 1.3.集合接口实现类 1.3.1.LinkedList 1.3.2.ArrayList ...
- 题解 CF611H 【New Year and Forgotten Tree】
Solution 提供一种新思路. 首先考虑如何判断一个状态是否合法. 考虑把所有十进制长度一样的数缩成一个点. 这样的点的个数 \(\le 5\). 蒟蒻猜了一个结论:只要满足对于所有缩出来的点的子 ...
- 转：locality sensitive hashing
Motivation The task of finding nearest neighbours is very common. You can think of applications like ...
- 转：minhash
Minhash算法及其应用 一.引言 MinHash算法属于Locality Sensitive Hashing,用于快速估计两个集合的相似度.最早由Broder Andrei Z. 在1997年提出 ...
- 升级openssl和openssh版本
一.安装telnet-server服务(建议安装) 1. 查看系统是否已安装telnet-server,linux系统上默认已经安装telnet-client(或telnet),而telnet-ser ...
- 学好Spark/Kafka必须要掌握的Scala技术点（一）变量、表达式、循环、Option、方法和函数，数组、映射、元组、集合
前言 Scala是以JVM为运行环境的面向对象的函数式编程语言,它可以直接访问Java类库并且与Java框架进行交互操作.正如之前所介绍,Spark是用Scala语言编写的,Kafka server端 ...
- Jmeter +Maven+jenkins+eclipse 接口自动化测试
背景: 首先用jmeter录制或者书写性能测试的脚本,用maven添加相关依赖,把性能测试的代码提交到github,在jenkins配置git下载性能测试的代码,配置运行脚本和测试报告,配置运行失败自 ...
- JavaSE08-ArrayList
1.ArrayList类概述 什么是集合 提供一种存储空间可变的存储模型,存储的数据容量可以发生改变 ArrayList集合的特点 底层是数组实现的,长度可以变化 泛型的使用 用于约束集合中存储元素的 ...