[JS] 整頁式滾動

Full Page Scroll

在製作網站時，對於相對較簡單且明確的網頁內容，我們常常會見到一頁式的呈現方式， 使用者只需要很直覺得向下捲動，便可以完成網站的瀏覽。

但為了讓使用者減少不斷枯燥的滾動，可以利用整頁式滾動、輪播、增加互動效果...等等， 讓網站的瀏覽體驗變得更加豐富。

01/ 滾動控制：滑鼠滾動/鍵盤上下鍵

const $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'),
      $section = $('section');
var numOfPages = $section.length - 1, // 取得section
    curPage = 0, //起始頁
    scrollLock = false; //滾動開關
function scrollPage() {
  //滑鼠滾動
  $(document).on("mousewheel DOMMouseScroll", function(e) {
    if (scrollLock) return;
    if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0)
      navigateUp();
    else
      navigateDown();
  });
  //鍵盤上下鍵
  $(document).on("keydown", function(e) {
    if (scrollLock) return;
    if (e.which === 38)
      navigateUp();
    else if (e.which === 40)
      navigateDown();
  });
}

02/ 區塊滾動

// 上滾動
function navigateUp () {
  if (curPage === 0) return;
  curPage--;
  pagination();
};
// 下滾動
function navigateDown() {
  if (curPage === numOfPages) return;
  curPage++;
  pagination();
};
// 滾動至上/下區塊
function pagination() {
  scrollLock = true;
  $body.stop().animate({
    scrollTop: $section.eq(curPage).offset().top
  }, 1000, 'swing', function(){
    scrollLock = false;
  });
};

03/ 執行函數

$(function() {
  scrollPage();
});

▎範例

相關套件

fullPage scroll snapping. Create full screen pages fast and simple

jQuery One Page Scroll by Pete R. | The Pete Design