JQuery - 动画滚动但不是点击而是滚动

Question

我知道我可以使用“click”事件并使 jquery 滚动到某个 div，如下所示:

('a').click(function(){
    $('html, body').animate({
        scrollTop: $( '#div' ).offset().top
    }, 500);
    return false;
});

我想做的是检测滚动，然后根据窗口的高度，让 jquery 滚动到不同的位置。

我尝试了以下部分有效的方法，但一旦触发动画事件，它就不允许我滚动回顶部。

function goToByScroll(id){
    $('html,body').animate({
        scrollTop: $("#"+id).offset().top},
        'slow');
}
$( document ).ready(function() {
    $(window).scroll(function() {
        if ($(this).height() < 990) {
            goToByScroll('about');
        }else if($(this).height() < 500){
            goToByScroll('contact');
        }
    }); 
}); 

有什么想法吗？! 谢谢

Answer 1

我真的不明白你在做什么，但你的 javascript 条件是错误的。 所以如果你把 < 990在第一个条件中，所有 height < 990 都将转到那个结果，它永远不会转到第二个 if。 请参阅此更新后的代码。

function goToByScroll(id){
    $('html,body').animate({
        scrollTop: $("#"+id).offset().top},
        'slow');
}

var lastScrollTop = 0;
$(window).scroll(function(event){
    var scrollTop = $(this).scrollTop();
    if (scrollTop > lastScrollTop){
        // downscroll code
        if (scrollTop < 500) {
            goToByScroll('contact');
        }else if(scrollTop < 990){
            goToByScroll('about');
        }
    } else {
        // upscroll code
        if (scrollTop > 990) {
            goToByScroll('about');
        }else if(scrollTop > 500){
            goToByScroll('contact');
        }
    }
    lastScrollTop = scrollTop;
});