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

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

效果： 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);