Question

我无法在底部向下滚动...

上面的代码工作正常，但是对于底部，我们不知道页面的高度。然后它为页面末尾创建问题。请建议我...谢谢

$('.scrollToDown').fadeIn();
$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('.scrollToTop').fadeIn();
        $('.scrollToDown').fadeOut();
    } else {
        $('.scrollToTop').fadeOut();
        $('.scrollToDown').fadeIn();
    }
});
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},700);
    return false;
});
$('.scrollToDown').click(function(){
    $('html, body').animate({scrollTop : 5110},1000);
    return false;
});

Answer 1

您可以使用$(document).height()

试试这个

$('.scrollToDown').fadeIn();
$(window).scroll(function(){
    if ($(this).scrollTop() > 0) {
        $('.scrollToTop').fadeIn();
        $('.scrollToDown').fadeOut();
    } else {
        $('.scrollToTop').fadeOut();
        $('.scrollToDown').fadeIn();
    }
});
$('.scrollToTop').click(function(){
    $('html, body').animate({scrollTop : 0},700);
    return false;
});
$('.scrollToDown').click(function(){
    $('html, body').animate({scrollTop : $(document).height()},1000);
    return false;
});

Answer 2

您可以通过设置scrollTop属性的动画来向下滚动页面，无需插件，如下所示：

$(window).load(function() {
  $("html, body").animate({ scrollTop: $(document).height() }, 1000);
});

注意window.onload的使用（加载图像时......占用高度）而不是document.ready。

为了在技术上正确，您需要减去窗口的高度，但上述工作：

$("html, body").animate({ scrollTop: $(document).height()-$(window).height() });

要滚动到特定ID，请使用其.scrollTop（），如下所示：

$("html, body").animate({ scrollTop: $("#myID").scrollTop() }, 1000);

Answer 3

您应该滚动到的值是页面的高度减去窗口的高度：

$('.scrollToDown').click(function(){
    var h = $(document).height() - $(window).height();
    if (h > 0) {
        $('html, body').animate({scrollTop : h},1000);
    }
    return false;
});

演示：http://jsfiddle.net/Guffa/cnfn8ayr/

如何向下滚动向上滚动，向下滚动我没有得到页面高度

3 个答案: