滚动后滚动到下一个锚点

Question

I'm writing a website and I want to build some window-sized divs/sections. When the user stops scrolling between two of these divs, the div which takes more space in that moment should be scrolled at , so it's gonna be full-window-sized.

Answer 1

There are jQuery plugins to do this but here's a good template to see how you can implement your own:

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

Here's the relevant scrolling JavaScript for easing function to make it nice and scrollable:

//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 does exactly what you need.

If the whole library is too heavy for what you need, you could try to reimplement the logic with something like this https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913