javascript - 从一个部分滚动到另一个部分

Question

我正在构建一个包含一些部分的网站，每个部分都是窗口的 100% 高度，但最小为 800 像素

我想进行滚动，将 View 在一个滚动中从一个部分移动到另一个部分，但如果滚动较低，则 800 将像通常的滚动一样运行，直到到达新部分的末尾或开始，然后滚动到它。

我试着给自己写了一个脚本，但效果并不好
有好的脚本或教程吗？

(这是我到目前为止尝试做的……但没有成功……)

var prevScroll = $(window).scrollTop();
var currentSection = getCurrentSection();

$(window).scroll(function(){
    var newScroll = $(this).scrollTop();
    if (newScroll > prevScroll){
        checkScrolling("down");
    } else {
        checkScrolling("up");
    }
    prevScroll = newScroll;
});


function checkScrolling(direction) {

    var fromTop = $(window).scrollTop();
    var windowHeight = Math.max($(window).height(), 800);
    var currentPlace = $(currentSection).offset().top;

    if ( direction == "down" ) {
        if ( currentSection != ".blogs" ) {
            var nextPlace = $(currentSection).next().offset().top;
            if ( fromTop+windowHeight >= nextPlace ) {
                $("html, body").animate({scrollTop: nextPlace}, 1000);
                setTimeout(function(){
                    currentSection = getCurrentSection();
                }, 1001);
            }
        }
    } else {
        if ( currentSection != ".about" ) {
            var prevPlace = $(currentSection).prev().offset().top;
            if ( fromTop <= prevPlace+windowHeight ) {
                $("html, body").animate({scrollTop: prevPlace}, 1000);
                setTimeout(function(){
                    currentSection = getCurrentSection();
                }, 1001);
            }
        }
    }
}

function getCurrentSection() {
    var fromTop = $(window).scrollTop();
    var windowHeight = Math.max($(window).height(), 800);
    var s1 = $(".about").offset().top;
    var s2 = $(".works").offset().top;
    var s3 = $(".blogs").offset().top;

    if ( s1 <= fromTop && fromTop < s1+windowHeight ) {
        return ".about";
    } else if ( s2 <= fromTop && fromTop < s2+windowHeight ) {
        return ".works";
    } else if ( s3 <= fromTop && fromTop <= s3+windowHeight ) {
        return ".blogs";
    }
}

Answer 1

我建议你看看scrollMagic

http://scrollmagic.io/examples/basic/section_wipes_natural.html