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 ...
随机推荐
- flask注册蓝图报错
记录下这个我找了两天的坑... take no arguments() 这两天一直学习flask的时候,我把注册的蓝图,写成注册的form表单的 举个栗子 class TetsView(view.Me ...
- js 面试题正则相关
正则相关[i不区分大小写,g匹配全部数据] var str = "Hello word! I think word is good."; 1.替换str中的word为javascr ...
- js原生方法promise的实现
一会儿就要回家过年了,再来手写一个promise吧,要不等着下班真的煎熬... <!DOCTYPE html> <html lang="en"> <h ...
- PHash从0到1
背景 在重复图识别领域,对于识别肉眼相同图片,PHash是很有用的,而且算法复杂度很低.它抓住了 " 人眼对于细节信息不是很敏感 " 的特性,利用DCT变换把高频信息去掉,再加上合 ...
- P6100 [USACO19FEB]Painting the Barn G
本题解提供的做法思路应该是比较清晰的,可惜代码实现比较繁琐,仅供大家参考. 题解 不难发现 \(x\) ,\(y\) 的取值范围只有 \(200\) ,所以我们可以考虑从这里入手.我们可以先通过二维前 ...
- 大白话详解大数据hive知识点，老刘真的很用心(2)
前言:老刘不敢说写的有多好,但敢保证尽量用大白话把自己复习的内容详细解释出来,拒绝资料上的生搬硬套,做到有自己的了解! 1. hive知识点(2) 第12点:hive分桶表 hive知识点主要偏实践, ...
- Android 11 源码下载+编译教程
下载AOSP源码 这里我使用的是外国语大学的镜像执行的下载,Mac系统的话,一定要在区分大小姐的磁盘下执行 repo init -u https://mirrors.bfsu.edu.cn/git/A ...
- Java静态方法和非静态方法之间的关系
非静态方法 public class Demo2 { public static void main(String[] args) { //实例化这个类 new //对 ...
- 迭代 可迭代对象 迭代器的bj
1.迭代的概念 迭代是重复反馈过程的活动,其目的通常是为了逼近所需目标或结果.每一次对过程的重复称为一次"迭代",而每一次迭代得到的结果会作为下一次迭代的初始值. 2.可迭代对象 ...
- 使用BulkLoad恢复hbase数据
问题: hbase 集群启动不了,maste一直在初始化,数据面临丢失风险. 解决: 把hbfs上 /hbase 目录移走 改名为/hbase-bak 删除zk上的数据,重新建立一个新的hbase集群 ...