代码比较轻量,点击返回小火箭之后,下滑页面有时候会卡顿,但不影响使用哦
1、HTML部分
<!-- 返回顶部火箭 -->
<a onclick="topFunction()" id="myBtn" title="回顶部">
<img src="images/hj.png" style="width:65px;height:70px;">
</a>//加了小火箭图片,大小自己也调整了一下。
2、css部分
/*返回顶部火箭*/
#myBtn {
display: none; /* 默认隐藏 */
position: fixed;
bottom: 20px;
right: 10px;
z-index: 99;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
border-radius: 10px; /* 圆角 */
}
3、js部分
<!-- 返回顶部火箭js -->
<script type="text/javascript">
// 当网页向下滑动 30px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
function scrollFunction() {console.log(121);
if (document.body.scrollTop > 30 || document.documentElement.scrollTop > 30) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// 点击按钮,返回顶部
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
这个js比较简陋,跳转不是缓动,有待优化!