詳解Vue回到頂部

Vue回到頂部是一個非常常見的需求，一般來說，我們需要滿足以下幾個要求：1）實現一個線性的回到頂部的過程，2）點擊按鈕能夠快速回到頂部，3）滾動到一定高度後才顯示回到頂部按鈕。

一、基礎實現

首先，我們需要實現一個基礎的回到頂部功能，不考慮按鈕顯示和逐步滑動效果。

// template

<template>
  <div class="scroll-wrap" @scroll="scroll">
    <div class="scroll-content">
      <div class="content">  // 省略其他內容
        // 點擊回到頂部的按鈕
        <div class="back-to-top" @click="backToTop">Top</div>
      </div>
    </div>
  </div>
</template>

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      this.$refs.scrollWrap.scrollTop = 0;
    },
    scroll() {
      this.scrollTop = this.$refs.scrollWrap.scrollTop;
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  height: 300px;
  overflow-y: scroll;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}
</style>

在這個實現中，我們在mounted中監聽scroll事件，設置scrollTop的值，實現了一個基本的滾動效果。點擊back-to-top按鈕時，設置scrollTop為0，即可實現基本的回到頂部效果。

二、逐步回到頂部

為了讓用戶可以更加自然地回到頂部，我們可以添加逐步回到頂部效果。

// template（與上面相同）

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分為20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop <= 0) {
          clearInterval(countDown);
        } else {
          this.$refs.scrollWrap.scrollTop -= step;
        }
      }, 10);
    },
    scroll() {
      this.scrollTop = this.$refs.scrollWrap.scrollTop;
    }
  }
};
</script>

// style（與上面相同）

在這個實現中，我們添加了逐步回到頂部效果。通過分為20步，每一步設置scrollTop值減少1/20，實現了一個平滑逐步回到頂部的效果。

三、顯示/隱藏按鈕

為了讓用戶更加方便地使用回到頂部功能，我們可以在滾動高度超過一定值時，顯示回到頂部按鈕。

// template（與上面相同）

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      showButton: false,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分為20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop  100) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  height: 300px;
  overflow-y: scroll;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}
</style>

在這個實現中，我們添加了一個showButton屬性，當滾動高度超過100時，將showButton設為true，使得back-to-top按鈕的class加上show類，從而顯示出來。當滾動高度小於等於100時，將showButton設為false，使得back-to-top按鈕的class去掉show類，從而隱藏起來。

四、動態判斷按鈕位置

為了讓回到頂部按鈕可以根據頁面布局自動調整位置，我們需要實現動態判斷按鈕的位置。

// template

<template>
  <div class="scroll-wrap" @scroll="scroll">
    <div class="scroll-content">
      <div class="content">
        // 點擊回到頂部的按鈕
        <div class="back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
      </div>
    </div>
    <div class="sidebar">
      // 省略其他內容
      <div class="sidebar-back-to-top" :class="{show: showButton}" @click="backToTop">Top</div>
    </div>
  </div>
</template>

// script

<script>
export default {
  data() {
    return {
      scrollTop: 0,
      showButton: false,
      sidebarTop: 0,
      sidebarHeight: 0,
    };
  },
  mounted() {
    this.$refs.scrollWrap.addEventListener('scroll', this.scroll);
    // 獲取側邊欄的位置信息
    this.sidebarTop = this.$refs.sidebar.offsetTop;
    this.sidebarHeight = this.$refs.sidebar.offsetHeight;
  },
  methods: {
    backToTop() {
      let currentScrollTop = this.$refs.scrollWrap.scrollTop;
      let step = currentScrollTop / 20;  // 分為20步
      let countDown = setInterval(() => {
        if (this.$refs.scrollWrap.scrollTop  100 && this.scrollTop + window.innerHeight < this.sidebarTop + this.sidebarHeight) {
        this.showButton = true;
      } else {
        this.showButton = false;
      }
    }
  }
};
</script>

// style

<style>
.scroll-wrap {
  display: flex;
}

.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.back-to-top.show {
  opacity: 1;
}

/* 側邊欄樣式 */
.sidebar {
  width: 20%;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
}

.sidebar-back-to-top {
  background-color: #333333;
  color: #ffffff;
  font-size: 14px;
  padding: 10px 20px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s;
}

.sidebar-back-to-top.show {
  opacity: 1;
}
</style>

在這個實現中，我們首先新增了一個sidebar側邊欄，將back-to-top按鈕也添加到了側邊欄中，作為一個備選方案（如果頁面布局看不到back-to-top按鈕，用戶可以通過側邊欄的back-to-top按鈕進行操作）。然後，我們在mounted中獲取側邊欄的位置信息（top和height），在scroll回調中，判斷scrollTop+窗口高度是否小於sidebar的底部位置，從而確定back-to-top按鈕是否可以顯示。

五、總結

至此，我們對Vue回到頂部進行了詳細的闡述。在實現過程中，我們需要注意以下幾點：

1、基本實現：監聽scroll事件，動態設置scrollTop的值，然後點擊back-to-top按鈕時將scrollTop設為0即可。

2、逐步回到頂部：分為20步，每一步設置scrollTop值減少1/20，實現平滑逐步回到頂部的效果。

3、顯示/隱藏按鈕：當scrollTop>100時，顯示back-to-top按鈕；否則，隱藏back-to-top按鈕。

4、動態判斷按鈕位置：當scrollTop+窗口高度小於sidebar的底部位置時，顯示back-to-top按鈕，並將back-to-top按鈕放置在側邊欄中，作為備選方案。

以上實現僅供參考，實際功能還需要根據具體業務情況進行調整。