Question

我有以下代码和DEMO fiddle。

jQuery(document).ready(function () {
    $(window).scroll(function () {
        $('html, body').animate({
            scrollTop: $('#content').offset().top
        }, 1000);
    });
});

我真的很困惑为什么我无法向上滚动？任何人都可以向我解释为什么，并请分享你的一些解决方案。

任何帮助，非常感谢。

Answer 1

好吧，这应该做你要求的。我不认为它非常用户友好，但这取决于你。

Demo Fiddle

//this prevents the animate method from running multiple times. 
var scrolling = false;    

jQuery(document).ready(function () {
    $(window).scroll(function () {
        if ( $(window).scrollTop() <= 100 && scrolling === false) {
            //set to true to prevent multiple scrolls
            scrolling = true; 

            //run the animation 
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000, function() {
                //when animation is complete, set scrolling to false
                scrolling = false; 
            });
        }

    });
});

Answer 2

您无法向上滚动，因为您的代码已包含在scroll()函数中，因此每次尝试使用鼠标滚轮或箭头键滚动时，它基本上都会锁定其位置。如果您修改为以下内容，那么它将在页面首次加载时相应地定位。

jQuery(document).ready(function () {
    $('html, body').animate({
        scrollTop: $('#content').offset().top
    }, 1000);
});

Answer 3

点击链接时，您是否尝试将其设为动画？如果需要，您需要更改代码：

 jQuery(document).ready(function () {
        $('a').click(function () {
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        });
    });

我可能会为您的链接添加一个类或ID值，以便您可以定位该特定链接。上面的代码将适用于您网页上的所有链接...虽然现在只有一个。

<h1><a href="#content" class="scrollToContent">Scroll to the Content</a></h1>

 jQuery(document).ready(function () {
        $('.scrollToContent').click(function () {
            $('html, body').animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        });
    });

Answer 4

我不确定你是否会对此感到满意，但我找到了一些可以帮助我解决问题的东西。

jQuery(document).ready(function () { 
    $(this).bind('mousewheel', function(e){
        if(e.originalEvent.wheelDelta /120 < 1) { 
            $('html, body').delay(200).animate({
                scrollTop: $('#content').offset().top
            }, 1000);
        }
    }); 
});

<强> DEMO

Answer 5

无需添加jquery功能即可满足已提出的要求。请删除Jquery代码并运行小提琴中提供的代码段。它符合要求。

jQuery滚动不向上滚动

5 个答案: