页面滚动到指定位置的两种方案
程序员文章站
2022-06-07 13:13:40
...
页面滚动到指定位置的两种方案
一. 简单方案 (scrollTo)
1. 前置知识
Element.scrollTo()方法可以使界面滚动到给定元素的指定坐标位置
1.1 语法
element.scrollTo(
X,Y)
X是期望滚动到位置水平轴上距元素左上角的像素Y是期望滚动到位置竖直轴上距元素左上角的像素
element.scrollTo(
options)
option是一个ScrollToOptions对象
1.2 关于 ScrollToOptions 对象
1.2.1 ScrollToOptions 对象可作为以下方法的参数
- Window.scroll()
- Window.scrollBy()
- Window.scrollTo()
- Element.scroll()
- Element.scrollBy()
- Element.scrollTo()
1.2.2 ScrollToOptions 对象的属性
ScrollToOptions.top指定 window 或元素 Y 轴方向滚动的像素数
ScrollToOptions.left指定 window 或元素 X 轴方向滚动的像素数
ScrollToOptions.behavior指定滚动是否应该平滑进行，还是立即跳到指定位置。该属性实际上定义在 ScrollOptions 字典上，它通过 ScrollToOptions 实现
behavior有两个值,'smooth'平滑移动到目标位置,'auto'瞬移到目标位置
2. 代码
JS
var elevator = document.getElementsByClassName("elevator")[0],
var goBack = document.querySelector(".elevator>ul>li>a")
console.dir(elevator)
window.onscroll = function(e) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
if (scrollTop >= 500) {
elevator.style.display = "block"
} else {
elevator.style.display = "none"
}
goBack.onclick = () => {
window.scrollTo({
top: 0,
left: 0,
behavior: 'smooth' //重点在此
})
}
}
HTML
<body>
<div class="container">
<h1>Title</h1>
<p>Lorem</p>
<div class="elevator">
<ul>
<li><a href="javascript:;">返回顶层</a></li>
</ul>
</div>
</div>
</body>
CSS
.container {
width: 800px;
margin: 0 auto;
position: relative;
}
.elevator {
position: fixed;
right: 0;
top: 400px;
display: block;
}
二. 复杂方案 (scrollBy)
1. 核心思路
用定时器功能按周期向目标方向挪动一定距离, 在视觉上呈现出滚动的效果
2. 代码
JS
window.onscroll = function() {
scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop > 500) {
toTop.style.display = "block"
} else {
toTop.style.display = "none "
}
}
toTop.onclick = function() {
var dist = scrollTop
var steps = 50
var dura = 500
var step = dist / steps
var interval = dura / steps
var timer = setInterval(() => {
window.scrollBy(0, -step)
steps--
if (steps == 0) {
clearInterval(timer)
steps = 50
}
}, interval);
}
注意: 为了考虑到各种机型性能和用户体验, 间隔时间不宜小于10毫秒
HTML
<body>
<div id="d1">
<p>Lorem</p>
</div>
<div id="toTop">回到顶部</div>
</body>
CSS
#d1 {
width: 200px;
}
#toTop {
position: fixed;
top: 0;
right: 0;
}