从页面底部回到顶部+动画效果 & 翻页后从按钮处回到页面顶部

最新推荐文章于 2022-04-20 12:09:23 发布

原创最新推荐文章于 2022-04-20 12:09:23 发布 · 614 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #css3

Blog网站专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何通过JavaScript实现页面滚动时点击底部固定按钮自动平滑滚动回顶部，带有动画效果。通过定时器控制滚动速度，并在到达顶部时停止。

点击按钮从页面底部回到页面顶部（动画效果）

效果：
在这里插入图片描述
template

<div>顶部</div>
<div class="footer">底部</div>
<div class="toTop" @click="toTop()">
	回到顶部
</div>

style

body {
        height: 2000px;
    }
.toTop {
	   position: fixed;
	   bottom: 140px;
	   right: 40px;
	   transition: 3s;
}
.footer {
	   margin-top: 2200px;
}

script

methods: {
    toTop(){
      let timer = -1
      let scrollTo = document.documentElement.scrollTop || document.body.scrollTop
      if ( timer === -1 ){
          timer = setInterval(() => {
          scrollTo -= 20
          if( scrollTo <= 0 ) {
             scrollTo = 0
             window.clearInterval(timer)
             timer = -1
          }
          window.scrollTo(0,scrollTo) 
        }, 10);
      }
    }
  },

翻页后从按钮处回到页面顶部

在按钮处添加一个事件，重复以上js代码即可

不要动画效果的话直接写：

window.scrollTo(0,0)

解析

获取当前页面滚动条纵坐标的位置：document.body.scrollTop与document.documentElement.scrollTop

获取当前页面滚动条横坐标的位置：document.body.scrollLeft与document.documentElement.scrollLeft

document.body.scrollTop与document.documentElement.scrollTop两者有个特点，就是同时只会有一个值生效，这两个值总有一个恒为0.且不同浏览器兼容性不同
故可以写成scrollTo = document.documentElement.scrollTop || document.body.scrollTop

setInterval(function, milliseconds)
milliseconds 周期性执行或调用 code/function 之间的时间间隔

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval(() => {
          scrollTo -= 20
          if( scrollTo <= 0 ) {
             scrollTo = 0
             window.clearInterval(timer)  // scrollTo = 0时停止计算表达式
          }
          window.scrollTo(0,scrollTo) // 页面滚动到计算出来的位置
        }, 10);