Question

的示例

<div id="wrapper" style="height:100px; width:100%;">
    <div id="header" style="height:300px; width:100%;"></div>
</div>

当我第一次向下滚动时，我想如果页面可以跳过整个标题。然后，当我向上滚动时，我想，如果标题出现在屏幕上，滚动就会跳到页面顶部（显示整个标题）。

Answer 1

您可以简单地检查您的位置以及是否使用jQuery滚动。所以你可以这样做：

<强>编辑：

var lastScrollTop = 0;
var firstScrollDown = true;
var scrollUp = false;
$(window).scroll(function (event) {
    var st = $(this).scrollTop();
    if (st > $('#content').offset().top) {
        scrollUp = true;
    }
    if (st > lastScrollTop) {
        if ($(window).scrollTop() !== 0 && firstScrollDown) {
            firstScrollDown = false;
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 'slow');
        }
    } else {
        if ($(window).scrollTop() < $('#content').offset().top && scrollUp) {
            $('html, body').animate({
                scrollTop: $('#header').offset().top
            }, 'slow');
            scrollUp = false;
        }
    }

    lastScrollTop = st;
});

http://jsfiddle.net/4n6mer0y/1/

Answer 2

如果不是一个完整的解决方案，那么非常接近

   var lastScrollTop = 0;
    $(window).scroll(function () {

        if ($('#header').scrollTop() + $('#header').innerHeight() >= $(window).scrollTop()) {
            var st = $(this).scrollTop();
            if (st > lastScrollTop) {
                console.log('scroll down');
                $('html, body').animate({
                    scrollTop: $('#header').scrollTop() + $('#header').innerHeight()
                }, 2000, function() {
                    $('html, body').stop();
                });
            } else {
                console.log('scroll up');
                $('html, body').animate({
                    scrollTop: $('#header').scrollTop()
                }, 2000, function() {
                    $('html, body').stop();
                });
            }
        }
        lastScrollTop = st;
    });

如何用第一个滚动到页面的某个点？

2 个答案: