滾動到頂部詳解

一、滾動到頂部JS

JavaScript是實現滾動到頂部的一種常見方式。我們可以利用瀏覽器提供的API獲取頁面的滾動高度，並設置為0，即可實現滾動到頂部的效果。

function scrollToTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}

其中，behavior屬性控制滾動的行為，設置為”smooth”時可實現平滑滾動的效果。此方法可通過按鈕觸發。

二、滾動到頂部固定改變樣式

實現滾動到頂部時改變頁面元素樣式也是一種常見需求。我們可以監聽頁面的滾動事件，並在滾動到一定高度時改變元素的樣式。

<style>
.fixed-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
}
</style>

<button id="fixedBtn" class="fixed-btn">Scroll to top</button>

<script>
const fixedBtn = document.getElementById('fixedBtn');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    fixedBtn.style.display = 'block';
  } else {
    fixedBtn.style.display = 'none';
  }
});

fixedBtn.addEventListener('click', scrollToTop);

function scrollToTop() {
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth'
  });
}
</script>

該示例通過固定按鈕的方式實現滾動到頂部，並在滾動一定高度時將按鈕顯示出來。

三、滾動到頂部快捷

提供一些更為快捷的滾動到頂部的方式也是可以優化用戶體驗的。比如，我們可以在頁面右側提供一個「回到頂部」的小圖標，用戶點擊即可跳轉到頂部。

<style>
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
}
</style>

<i id="scrollToTop" class="scroll-to-top" aria-hidden="true"></i>

<script>
const scrollToTop = document.getElementById('scrollToTop');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    scrollToTop.style.display = 'block';
  } else {
    scrollToTop.style.display = 'none';
  }
});

scrollToTop.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>

該示例通過添加一個小圖標，並通過CSS設置為固定在頁面底部右側的方式，實現了一個快捷的滾動到頂部的功能。

四、滾動到頂部怎麼用

使用滾動到頂部的方法相對簡單，在需要的位置調用即可。比如，在一個按鈕的點擊事件中，調用滾動到頂部的函數即可。

<button onclick="scrollToTop()">Scroll to top</button>

<script>
function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>

該示例在按鈕的點擊事件中調用scrollToTop()函數，實現了滾動到頂部的效果。

五、滾動到頂部怎麼取消

如果我們不希望滾動到頂部的功能出現在某些頁面或者特定條件下時，可以通過取消事件監聽的方式達到該目的。

const fixedBtn = document.getElementById('fixedBtn');
const disableScrollToTop = true; //設置為true時禁用滾動到頂部

if (!disableScrollToTop) {
  window.addEventListener('scroll', () => {
    if (window.pageYOffset > 200) {
      fixedBtn.style.display = 'block';
    } else {
      fixedBtn.style.display = 'none';
    }
  });

  fixedBtn.addEventListener('click', scrollToTop);

  function scrollToTop() {
    window.scrollTo({
      top: 0,
      left: 0,
      behavior: 'smooth'
    });
  }
} else {
  window.removeEventListener('scroll');
  fixedBtn.removeEventListener('click', scrollToTop);
}

該示例通過設置disableScrollToTop變數為true，禁用了滾動到頂部的效果，同時通過removeEventListener移除了事件監聽器。

六、滾動到頂部快捷蘋果手機

在蘋果手機上，我們可以使用WebKit的內置屬性 -webkit-overflow-scrolling:touch，使得滑動頁面時具有慣性效果，並且在快速滑動時可以快速滾動到頁面頂部。

body {
  -webkit-overflow-scrolling: touch;
}

該示例直接在body元素的樣式中添加-webkit-overflow-scrolling:touch屬性即可實現滾動到頁面頂部的效果。

七、滾動到頂部實現方法

除了JavaScript實現滾動到頂部的效果外，還可以利用CSS3中的一些新屬性和偽類實現類似效果。

<style>
.scroll-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .5s;
}

.scroll-to-top:hover {
  opacity: .5;
}

.scroll-to-top:before {
  content: "Top";
  display: inline-block;
  margin-right: 5px;
}
</style>

<button id="scrollBtn" class="scroll-to-top"></button>

<script>
const scrollBtn = document.getElementById('scrollBtn');

window.addEventListener('scroll', () => {
  if (window.pageYOffset > 200) {
    scrollBtn.style.opacity = 1;
  } else {
    scrollBtn.style.opacity = 0;
  }
});

scrollBtn.addEventListener('click', () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
});
</script>

該示例通過CSS3的opacity屬性實現了滾動到頂部按鈕的淡入淡出效果，並通過:before偽類添加了「Top」文本，增加了可讀性。

八、蘋果滾動手勢滾動到頂部

iOS中提供了一種在頁面滑動到頂部時自動出現「回到頂部」按鈕的手勢。我們只需要在頁面中設置scroll-view的屬性，即可使用該手勢。

<scroll-view scroll-to-top="{{true}}">
  //頁面內容
</scroll-view>

該示例在scroll-view組件中設置了scroll-to-top屬性為true，即開啟了在滾動到頂部時自動出現「回到頂部」按鈕的手勢效果。

九、蘋果手機取消滾動到頂部

在特定場景下，我們可能需要禁用蘋果手機自帶的滾動到頂部手勢效果。我們可以通過設置CSS樣式的方式達到該目的。

body {
  -webkit-scroll-snap-stop: always;
}

該示例通過在body元素的樣式中添加-webkit-scroll-snap-stop:always屬性，禁用了蘋果手機自帶的滾動到頂部手勢效果。