滾動后滾動到下一個錨點

Question

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

Answer 1

有jQuery插件可以執行此操作，但這里有一個很好的模板，可以看到如何實現自己的：

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

這是用於緩動函數的相關滾動JavaScript，使其更好並且可滾動：

//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 2

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

如果整個庫太重而無法滿足您的需求，您可以嘗試使用類似的方式重新實現邏輯https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/ javascript.fullPage.js＃L897-L913