Question

当页面本身从顶部滚动超过300像素时，我将页面滚动到div。问题是，在动画滚动之后，我无法正常向上滚动。

$(function () {
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() > 300) {
            //$( "body" ).animate({scrollTop:$wh });
            $('body').animate({
                scrollTop: $("#div2").offset().top
            }, 200);
        }
    });
});

Answer 1

可能是因为每次滚动时事件都会再次被触发：）

$(function () {
    $(window).bind('scroll.once', function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() > 300) {
            //$( "body" ).animate({scrollTop:$wh });
            $('body').stop().animate({
                scrollTop: $("#div2").offset().top
            }, 200);
            $(window).unbind('scroll.once');
        }
    });
});

Answer 2

您需要升级if条件

$(function () {
    var lastScroll = $(window).scrollTop();
    $(window).scroll(function () {
        var scrollTop = $(window).scrollTop();
        var divTop = $("#div2").offset().top;
            if ( scrollTop > lastScroll && scrollTop <= 300 ) {
            $('body').stop().animate({
                scrollTop: divTop
            }, 100);
        }
        lastScroll = scrollTop;
    });
});

仅在当前scrolltop大于lastscroll（向下滚动）时设置动画并且客户端在300px线之后。

        if ( scrollTop > lastScroll && scrollTop <= 300 ) {

工作示例

http://jsfiddle.net/JAy7Y/1/

页面滚动动画后无法正常滚动

2 个答案: