html返回顶部动画,js 返回页面顶部（动画）

js 返回到页面顶部，含有渐变或者动画效果

点击返回顶部按钮，页面逐渐向上回到顶部：

go-Top

// 获取按钮

const goTopBtn = document.getElementById('goTop')

// 初始时，被浏览器卷进去的上部内容高度为 0

let scrollTop = 0

// 监听页面滚动事件

window.onscroll = () => {

// 获取被浏览器卷进去的上部内容高度

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

// 如果被卷进去的内容高度大于 50，显示返回顶部的按钮；

// 如果被卷进去的内容高度小于 50，隐藏返回顶部的按钮。

scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')

}

goTopBtn.onclick = () => {

// 清空上一次的定时器

let timer = null;

clearInterval(timer);

// 创建定时器，每 15ms 执行一次箭头函数

timer = setInterval(()=>{

// 每次执行函数，scrollTop 减少十分之一

scrollTop -= scrollTop / 10;

window.scrollTo(0,scrollTop)

// 当 scrollTop 小于 2 时，直接使 scrollTop 为 0，并且清空定时器。

if(scrollTop<2){

window.scrollTo(0,0);

clearInterval(timer);

}

},15)

}

js 返回到页面顶部，直接返回

点击返回顶部按钮，页面直接向上回到顶部：

go-Top

const goTopBtn = document.getElementById('goTop')

let scrollTop = 0

window.onscroll = () => {

scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')

}

goTopBtn.onclick = () => {

window.scrollTo(0, 0);

}