美文网首页
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