如何用第一个滚动条跳转到页面的某个点

How to jump with the first scroll to a certain point of the page?

本文关键字：第一个 何用 滚动条      更新时间：2023-09-26

下面是一个例子http://jsfiddle.net/pwk0vvuo/

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

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

如果不是一个完整的解决方案，则相当接近

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

您可以简单地检查您的位置以及是否使用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/

相关文章：