美文网首页
js实现回到顶部效果,或去到指定位置

js实现回到顶部效果,或去到指定位置

作者: hszz | 来源:发表于2021-10-24 18:26 被阅读0次
  • 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()
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);
也可用回到顶部的方法实现

相关文章

网友评论

      本文标题:js实现回到顶部效果,或去到指定位置

      本文链接:https://www.haomeiwen.com/subject/cftdaltx.html