js 返回到页面顶部，含有渐变或者动画效果
<html>
<!-- 定义返回顶部的按钮，id 为 “goTop”，默认初始状态隐藏 -->
<div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
</html>
<script>
// 获取按钮
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)
}
</script>
js 返回到页面顶部，直接返回
<html>
<div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
</html>
<script>
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);
}
</script>
网友评论