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 ...
随机推荐
- [BJDCTF2020]ZJCTF，不过如此 php伪协议， preg_replace() 函数/e模式
转自https://www.cnblogs.com/gaonuoqi/p/12499623.html 题目给了源码 <?php error_reporting(0); $text = $_GET ...
- 补：冲刺Day2
每天举行站立式会议照片: 昨天已完成的工作: 各个成员在 Alpha 阶段认领的任务. 今天各个成员的任务安排. 冲刺Day1博客. 今天计划完成的工作: 成员 任务 高嘉淳 完成登陆.注册 覃泽泰 ...
- BJOI2016 IP地址
题目链接 Description 给定 \(n\) 个 \(01\) 模式串.\(q\) 次询问: 每次询问给定一个 \(01\) 串: 设给这个串匹配的串是在模式串中存在的他的最长前缀 问 \([a ...
- P5785 [SDOI2012]任务安排
本题解用于本蒟蒻加深算法印象,也欢迎大家阅读 本篇题解将分为四块,一步一步地讲解本题, Part 1: O(n^3) \(n^3\) 算法应该非常的显然,我们设 \(f_{i,j}\) 为到 \(i\ ...
- 题解-JSOI2011 分特产
题面 JSOI2011 分特产 有 \(n\) 个不同的盒子和 \(m\) 种不同的球,第 \(i\) 种球有 \(a_i\) 个,用光所有球,求使每个盒子不空的方案数. 数据范围:\(1\le n, ...
- JVM的艺术—类加载器篇（三）
JVM的艺术-类加载器篇(三) 引言 今天我们继续来深入的剖析类加载器的内容.上篇文章我们讲解了类加载器的双亲委托模型.全盘委托机制.以及类加载器双亲委托模型的优点.缺点等内容,没看过的小伙伴请加关注 ...
- 哔哩哔哩直播录制工具v1.1.18
软件介绍 看直播有时候非常精彩想要录制下来,或者非常喜欢某个主播想录制下直播全程,可去找录制软件的时候却发现有这样那样的问题,导致一番操作不尽人意.但是现在<B站直播录制工具>可以完美解决 ...
- ab test压力测试
之前做性能调试的时候一直用的JMeter压测,最近发现一款简单易用的压力测试工具. ab(Apache benchmark)是一款常用的压力测试工具,是Apache附带的一个小工具 , 专门用于HTT ...
- 1.微博回调接口 和绑定user接口
1.1 oauth/views.py 中添加试图函数 http://192.168.56.100:8888/oauth/weibo/callback/ # 通过vue前端传入的code,微博身份验证c ...
- 【JAVA基础】static的定义
public class STATIC { public static void main(String[] args) { // 创建两个不同的类 只要赋值一个 另外一个定义好的static属性 会 ...