滚动后滚动到下一个锚点

Question

我正在编写一个网站，希望构建一些窗口大小的div / section。 当用户在两个这些div之间停止滚动时，占用更多空间的div应该被滚动到，以便它变成全屏大小。

- Malte

---

看起来你正在寻找 fullPage.js，但是想要保留滚动条？可以查看这个演示或者这个演示。 - Alvaro

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();
    });
});

- jojo

Answer 2

FullPage.js 正好符合您的需求。

如果整个库对您来说太重了，您可以尝试使用类似于这样的东西重新实现逻辑 https://github.com/alvarotrigo/fullPage.js/blob/master/pure%20javascript%20(Alpha)/javascript.fullPage.js#L897-L913

- theCaveat