转载文档

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

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

    1. <html>
    2. <!-- 定义返回顶部的按钮，id 为 “goTop”，默认初始状态隐藏 -->
    3. <div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
    4. </html>
    5. <script>
    6. // 获取按钮
    7. const goTopBtn = document.getElementById('goTop')
    8. // 初始时，被浏览器卷进去的上部内容高度为 0
    9. let scrollTop = 0
    10. // 监听页面滚动事件
    11. window.onscroll = () => {
    12.   // 获取被浏览器卷进去的上部内容高度
    13.   scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    14.   // 如果被卷进去的内容高度大于 50，显示返回顶部的按钮；
    15.   // 如果被卷进去的内容高度小于 50，隐藏返回顶部的按钮。
    16.   scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')
    17. }
    18. goTopBtn.onclick = () => {
    19.   // 清空上一次的定时器
    20.   let timer = null;
    21.   clearInterval(timer);
    22.   // 创建定时器，每 15ms 执行一次箭头函数
    23.   timer = setInterval(()=>{
    24.     // 每次执行函数，scrollTop 减少十分之一
    25.     scrollTop -= scrollTop / 10;
    26.     window.scrollTo(0,scrollTop)
    27.     // 当 scrollTop 小于 2 时，直接使 scrollTop 为 0，并且清空定时器。
    28.     if(scrollTop<2){
    29.       window.scrollTo(0,0);
    30.       clearInterval(timer);
    31.     }
    32.   },15)
    33. }
    34. </script>

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

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

    1. <html>
    2. <div id="goTop" style="position: fixed; right: 50px; bottom: 50px; background: deeppink; display: none;">go-Top</div>
    3. </html>
    4. <script>
    5. const goTopBtn = document.getElementById('goTop')
    6. let scrollTop = 0
    7. window.onscroll = () => {
    8.   scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    9.   scrollTop > 50 ? (goTopBtn.style.display = 'block') : (goTopBtn.style.display = 'none')
    10. }
    11. goTopBtn.onclick = () => {
    12.   window.scrollTo(0, 0);
    13. }
    14. </script>