滾動後滾動到下一個錨點

Question

我正在編寫一個網站，我想構建一些窗口大小的div /節。當用戶停止在這兩個div之間滾動時，需要更多空間的div應在滾動，因此它將是全窗口大小。

Answer 1

我沒有這種第三方插件的經驗，所以我不能推薦「最好」的。

但這裏有一些例子：

http://guidobouman.github.io/jquery-panelsnap/

http://wtm.github.io/jquery.snapscroll/

我相信這是你在找什麼。

編輯：這一個看起來不錯，也https://projects.lukehaas.me/scrollify/#options

Answer 2

有jQuery插件做到這一點，但這裏有一個很好的模板，以瞭解如何實現自己：

https://startbootstrap.com/template-overviews/scrolling-nav/

這裏的相關滾動JavaScript的easing功能，使其很好，可滾動：

//jQuery to collapse the navbar on scroll 
$(window).scroll(function() { 
    if ($(".navbar").offset().top > 50) { 
     $(".navbar-fixed-top").addClass("top-nav-collapse"); 
    } else { 
     $(".navbar-fixed-top").removeClass("top-nav-collapse"); 
    } 
}); 

//jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('a.page-scroll').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
}); 

Answer 3

FullPage.js完全符合你的需求。

如果整個庫是你需要的東西太重了，你可以嘗試這樣的事情https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913