页面滚动到指定位置的方法

视口中可显示的信息是有限的，因此我们常需要页面滚动实现内容显示的切换,介绍几种实现方式：

纯html实现（锚点）

跳转按钮：<a href="#anchorName">点击跳转当前页面指定锚点</a>
设置锚点：<a name="anchorName">a标签锚点</a>、<p id="anchorName">id锚点</p>

分析：当点击a标签就会跳到锚点处，没有缓冲效果，体验一般，而且url里会添加"#anchorName"。这在SPA应用里是会影响路由配置。刷新页面并不会定位到锚点。

js辅助（window.scrollTo方法）

借助window.scrollTo({ top,left ,behavior})方法。

举个例子：点击按钮视口调整到某元素的上方。

先获取该元素到文档顶部的距离，offsetTop返回当前元素相对于其 offsetParent 元素的顶部的距离。
通过循环的方式累加来获取距离文档最顶部的距离

function heightToTop(ele){//ele为指定跳转到该位置的DOM节点let root = document.body;let height = 0;do{height += ele.offsetTop;ele = ele.offsetParent;}while( ele !== root )return height;
}
//某按钮点击时
someBtn.addEventListener('click',function(e){window.scrollTo({top:heightToTop(e.target),behavior:'smooth'})
})

两行方法适用不同的场景，仁者见仁智者见智吧！

over

感谢阅读！

页面滚动到指定位置的方法相关推荐

Query实现将div中滚动条滚动到指定位置的方法，html中offsetTop、clientTop、scrollTop、offsetTop各属性的解释
TML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...
js控制页面滚动到指定位置，js中scrollIntoView()的用法
js中scrillIntoView()的用法--页面滚动到指定位置最近遇到一个问题,在一个页面上,点击某个按钮时,滚动到页面的某一位置. 如图: 如果是我写的话,我可能会先获取滚动到的元素,然后获取 ...
页面滚动到指定位置导航栏固定顶部
做一个网页时经常会用到导航栏,导航栏对于一个网站来说,地位是举足轻重的,在用到导航栏时,我们经常会用到一个效果,就是当页面滑动到一定的位置时,导航栏需要固定在页面的顶部,这是怎么实现的呢? 下面的代码 ...
微信小程序页面滚动到指定位置
给需要滚到特定位置的元素或者组件添加一个id,通过这个id值可确定位置数据,具体代码如下: var that= this;var query = wx.createSelectorQuery().in ...
uni-app小程序点击页面滚动到指定位置
uni.pageScrollTo({scrollTop: 0,duration: 300,})
监听某个区域滚动_监听页面滚动及滚动到指定位置
一.原生js通过window.onscroll监听 window.onscroll = function() { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮 ...
vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
微信小程序：实现跳转页面到其它页面的指定位置的方法
微信小程序上没有类似 html 锚点链接的方法,但在一些开发场景下却又有这样的需求,我们只能想办法来实现曲线救国了.这篇文章主要介绍了实现跳转页面到其它页面的指定位置的方法(示例代码)以及相关的经验技 ...
div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索南宫仆射 ,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式. 查 ...
微信小程序实现滚动到指定位置
微信小程序的按钮点击后滚动到页面内的指定位置. wxml内容 <view class="box1" bindtap="toComment">查看回答 ...

页面滚动到指定位置的方法

纯html实现（锚点）

js辅助（window.scrollTo方法）

over

页面滚动到指定位置的方法相关推荐

最新文章

热门文章