jQuery滚动到页面底部答案

【问题标题】：jQuery Scroll To bottom of the pagejQuery滚动到页面底部
【发布时间】：2011-05-14 01:21:48
【问题描述】：

我的页面加载完成后。我希望 jQUery 能够很好地滚动到页面底部，快速制作动画，而不是快速/颠簸。

我需要像ScrollTo 这样的插件吗？或者它是如何内置在 jQuery 中的？

【问题讨论】：

之前的答案中提到的脚本，例如：$("body, html").animate({ scrollTop: $(document).height() }, 400) 将不起作用在 Chrome 中，并且会在 Safari 中跳跃以防 html 标签在 CSS 中有 @987654323 @ 属性集。我花了将近一个小时才弄清楚。

【解决方案1】：

你可以通过动画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);

【讨论】：

另一个问题，当它看起来完成时，然后用户尝试向上滑动，它被锁定了一点，并产生非常颠簸的效果，阻止用户向上滚动
@AnApprentice - 这是因为它发生得很快（默认为 400 毫秒），我建议快速滚动以缓解该问题。
锁定是因为距离关闭。它正在动画过去可见的动画。
@NickCraver - 使用最新版本的 jQuery .scrollTop() 似乎无法滚动到特定 ID；使用 .offset().top 应该可以工作：$("html, body").animate({ scrollTop: $("#myID").offset().top }, 1000);
这个答案需要编辑。 $(document).height() 对于scrollTop 属性的值太大，您可以通过缓动注意到这一点。我认为$(document).height() - window.innerHeight 应该没问题。

【解决方案2】：

类似这样的：

var $target = $('html,body'); 
$target.animate({scrollTop: $target.height()}, 1000);

【讨论】：

我尝试将目标更新为 .write-comment，但没有成功。也许是因为它被注入到页面中？

【解决方案3】：

你可以试试这个

var scroll=$('#scroll');
scroll.animate({scrollTop: scroll.prop("scrollHeight")});

【讨论】：

【解决方案4】：

$('html,body').animate({ scrollTop: 9999 }, 'slow');

就这么简单，9999的页面高度...大范围，所以它可以到达底部。

【讨论】：

这并不完美，因为在某些情况下，即使很少见，也可能会有比这更长的页面，特别是动态加载无限内容的页面。这将在中途停止滚动。
@Gass 自从我写这篇文章或使用任何 JS 以来已经有好几年了。无论如何，我检查并使用 Infinity 或太多的 9 打破了逻辑，至少在最新的 Chrome 和 FF 中，而是滚动到顶部。

【解决方案5】：

$("div").scrollTop(1000);

为我工作。滚动到底部。

【讨论】：

如果您的页面长度超过 1000 像素，则不会。

【解决方案6】：

使用'document.body.clientHeight'你可以得到body元素的可见高度

$('html, body').animate({
    scrollTop: $("#particularDivision").offset().top - document.body.clientHeight + $("#particularDivision").height()
}, 1000);

这在 id 'particularDivision' 处滚动

【讨论】：

【解决方案7】：

function scrollToBottom() {
     $("#mContainer").animate({ scrollTop: $("#mContainer")[0].scrollHeight }, 1000);
}

这是我的解决方案，你会发现，我确定

【讨论】：

两次使用相同的选择器是不好的做法，因为它会执行两次 dom 选择器查询，不必要地影响性能。最好将元素集合分配给 const 并像这样重用它： const $container = $("#mContainer"); $container.animate({ scrollTop: $container[0].scrollHeight }, 1000);

【解决方案8】：

$('#pagedwn').bind("click", function () {
        $('html, body').animate({ scrollTop:3031 },"fast");
        return false;
});

这个解决方案对我有用。它正在快速向下滚动页面。

【讨论】：

【解决方案9】：

对于 jQuery 3，请更改

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

到：

$(window).on("加载", function (e) { $("html, body").animate({ scrollTop: $(document).height() }, 1000); })

【讨论】：

【解决方案10】：

js

var el = document.getElementById("el");
el.scrollTop = el.scrollHeight - el.scrollTop;

【讨论】：

虽然这段代码可能有助于解决问题，但它并没有解释为什么和/或如何回答问题。提供这种额外的背景将显着提高其长期教育价值。请edit您的答案添加解释，包括适用的限制和假设。

【解决方案11】：

var pixelFromTop = 500;     
$('html, body').animate({ scrollTop: pixelFromTop  }, 1);

所以当页面打开时它会在 1 毫秒后自动向下滚动

【讨论】：