- document.documentElement.scrollTop 对应的是 html 标签
- document.body.scrollTop 对应的是 body 标签
- setInterval 计时器,会周期性的一直执行
- clearInterval 清除计时器
function toTop() {
// 获取页面纵坐标 滚动条 位置
let top = document.documentElement.scrollTop || document.body.scrollTop;
// 实现滚动效果
const timeTop = setInterval(() => {
// document.body.scrollTop 和 document.documentElement.scrollTop 等于top(当前位置)-50,直到top <= 0清除计时器
document.body.scrollTop = document.documentElement.scrollTop = top -= 50;
if (top <= 0) {
clearInterval(timeTop);
}
}, 10);
}
去到指定位置
- 比如我们有一个id为goods-sort的div。
Element.scrollIntoView()
-
Element
接口的scrollIntoView()方法会滚动元素的父容器,使被调用scrollIntoView()的元素对用户可见。 -
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView
document.getElementById('goods-sort').scrollIntoView()
// goods-sort 会滚动到可见区
scrollTop(xpos,ypos)方法可把内容滚动到指定的坐标。
https://www.w3school.com.cn/jsref/met_win_scrollto.asp
scrollTo(0,document.getElementById('goods-sort').offsetTop);
网友评论