vue点击按钮回到顶部事件

柔情只为你懂 2022-12-12 15:29 222阅读 0赞

<template>
      <div id="app">
        <router-view />
        <img
          src="../src/images/imgs/footer/up.png"
          alt=""
          id="return_top"
          style="display: block"
        />
      </div>
    </template>
    
    <script>
    export default { 
      name: "App",
      mounted() { 
        // var deviceWidth
        // setHtmlFontSize()
    
        // if (window.addEventListener) { 
        // window.addEventListener('resize', function () { 
        // setHtmlFontSize()
        // }, false)
        // };
        // function setHtmlFontSize () { 
        // // 1920是设计稿的宽度，当大于1920时采用1920宽度，比例也是除以19.20
        // // console.log(document.documentElement.clientWidth)
        // deviceWidth = document.documentElement.clientWidth > 1920? 1920: document.documentElement.clientWidth
        // document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 + 'px !important'
        // };
        // 回到顶部效果
        window.onload = function () { 
          var obtn = document.getElementById("return_top"); //获取回到顶部按钮的ID
          var clientHeight = document.documentElement.clientHeight; //获取可视区域的高度
          var timer = null; //定义一个定时器
          var isTop = true; //定义一个布尔值，用于判断是否到达顶部
    
          window.onscroll = function () { 
            //滚动条滚动事件
    
            //获取滚动条的滚动高度
            var osTop =
              document.documentElement.scrollTop || document.body.scrollTop;
    
            if (osTop >= clientHeight) { 
              //如果滚动高度大于可视区域高度，则显示回到顶部按钮
              obtn.style.display = "block";
            } else { 
              //否则隐藏
              obtn.style.display = "none";
            }
    
            //主要用于判断当 点击回到顶部按钮后 滚动条在回滚过程中，若手动滚动滚动条，则清除定时器
            if (!isTop) { 
              clearInterval(timer);
            }
            isTop = false;
          };
    
          obtn.onclick = function () { 
            //回到顶部按钮点击事件
            //设置一个定时器
            timer = setInterval(function () { 
              //获取滚动条的滚动高度
              var osTop =
                document.documentElement.scrollTop || document.body.scrollTop;
              //用于设置速度差，产生缓动的效果
              var speed = Math.floor(-osTop / 6);
              document.documentElement.scrollTop = document.body.scrollTop =
                osTop + speed;
              isTop = true; //用于阻止滚动事件清除定时器
              if (osTop == 0) { 
                clearInterval(timer);
              }
            }, 30);
          };
        };
      },
    };
    </script>
    
    <style>
    * { 
      margin: 0;
      padding: 0;
      list-style: none;
      font-family: PingFang SC;
    }
    #return_top { 
      width: 1rem;
      height: 1rem;
      position: fixed;
      right: 0.1rem;
      bottom: 0.1rem;
    }