點擊 回到頂部

使用scrollTop實現 根據網頁的滾動高度，判斷是否顯示回到頂部按鈕。

1：vue 中使用

<div>
  <p @click="backtop">回到頂部<p>
</div>

<script>
  export default {
    mounted() {
       window.addEventListener("scroll",this.showbtn,true);
    },
    methods: {
        // 顯示回到頂部按鈕
       showbtn(){
          let that = this;
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
          that.scrollTop = scrollTop
       },
      /**
        * 回到頂部功能實現過程：
        * 1. 獲取頁面當前距離頂部的滾動距離（雖然IE不常用了，但還是需要考慮一下兼容性的）
        * 2. 計算出每次向上移動的距離，用負的滾動距離除以5，因爲滾動的距離是一個正數，想向上移動就是做一個減法
        * 3. 用當前距離加上計算出的距離，然後賦值給當前距離，就可以達到向上移動的效果
        * 4. 最後記得在移動到頂部時，清除定時器
      */
      backtop(){
          var timer = setInterval(function(){
            let osTop = document.documentElement.scrollTop || document.body.scrollTop;
            let ispeed = Math.floor(-osTop / 5); 
            document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
            this.isTop = true;
            if(osTop === 0){
              clearInterval(timer);
            }
          },30)
      }
    }
  }
</script>

2：使用錨點實現

<div>
  <a href="#top">回到頂部</a>  // 這個方法就是爲 href 賦值，實現功能
</div>

3：使用 jQuery 實現 引入jQuery 框架

<div>
  <p id="backtop">回到頂部</p>
</div>

<script>
   function backtop(minHeight){
      // 獲取頁面最小高度，如果沒有傳入值就默認600
      minHeight ? minHeight = minHeight : minHeight = 600
      // 爲當前頁面綁定滾動事件
      $(window).scroll(function() {
        // 獲取頁面滾動高度
        let osTop = $(window).scrollTop();
        // 如果滾動高度大於頁面視口高度，就漸顯圖標，否則就漸隱圖標
        if(osTop > minHeight){
          $("#backtop").fadeIn(500);
        }else {
          $("#backtop").fadeOut(500);
        }
      })
      // 定義回到頂部動畫
     $("#backtop").click(
        function(){$('html,body').animate({scrollTop:'0px'},'slow');
     )}
</script>