代码比较轻量, 点击返回小火箭之后, 下滑页面有时候会卡顿, 但不影响使用哦
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 比较简陋, 跳转不是缓动, 有待优化!
来源: https://www.2cto.com/kf/201806/757419.html