前端HTML返回顶部小火箭代码实现

代码比较轻量，点击返回小火箭之后，下滑页面有时候会卡顿，但不影响使用哦

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比较简陋，跳转不是缓动，有待优化！