自动滚动到页面底部

Question

我有一份问题列表。当我点击第一个问题时，它应该自动将我带到页面底部的特定元素。

如何使用jQuery实现这一功能？

- jat

---

请将页面滚动到底部的jQuery代码放在以下位置：https://dev59.com/jG855IYBdhLWcg3wm1m3 - Sudhir Bastakoti

在这里使用仅CSS：https://dev59.com/p2gt5IYBdhLWcg3w7BoE#68874831 - ashleedawg

你尝试过使用内联锚点吗？https://dev59.com/p2gt5IYBdhLWcg3w7BoE#73257737 - thdoan

你尝试过使用内联锚点吗？https://stackoverflow.com/a/73257737/452587 - undefined

Answer 1

jQuery并不是必需的。我从谷歌搜索到的大多数顶部结果都给出了这个答案:

window.scrollTo(0, document.body.scrollHeight);

如果您有嵌套元素，文档可能无法滚动。在这种情况下，您需要针对可滚动的元素并使用其滚动高度。

nestedElement.scrollTo(0, nestedElement.scrollHeight);

这里有一些额外的资源供您参考：

• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

- Zhihao

---

对我没有用。我做了这个操作：element.scrollTop = element.scrollHeight。 - Esamo

请注意，"scrollTo"函数是实验性的，在某些浏览器中可能无法正常工作。 - corgrath

scrollto在我的浏览器上无法工作，我发现了以下链接：https://dev59.com/k2ox5IYBdhLWcg3w3YH-，这非常有用，因为所提供的解决方案适用于我尝试过的所有浏览器。 - user3655574

针对单独元素，这是可行的解决方案：document.querySelector(".scrollingContainer").scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight); - mPrinC

这个也可以正常工作：objectSelector.scrollTo({ top: objectSelector.scrollHeight })。理解一下，objectSelector 是通过 document.getElementById 返回的元素。附注：在 scrollTo 方法选项中添加 behavior: 'smooth' 可以设置一个预定义的滚动动画。 - KBeDev

Answer 2

滚动整个页面到底部：

const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

您可以在此处查看演示。

要将特定元素滚动到底部：

const scrollToBottom = (id) => {
    const element = document.getElementById(id);
    element.scrollTop = element.scrollHeight;
}

这是演示。

它的工作原理如下：

参考：scrollTop、scrollHeight、clientHeight

更新： Chrome（61+）和Firefox的最新版本不支持滚动body，请参见：https://dev.opera.com/articles/fixing-the-scrolltop-bug/

- Tho

---

该解决方案适用于Chrome、Firefox、Safari和IE8+。请查看此链接以获取更多详细信息：http://www.quirksmode.org/dom/w3c_cssom.html - Tho

@luochenhuan，我刚刚通过使用“document.scrollingElement”而不是“document.body”来修复了示例代码，请参见上文。 - David Avsajanishvili

Answer 3

纯JS实现：

element.scrollIntoView(false);

https://developer.mozilla.org/zh-CN/docs/Web/API/element.scrollIntoView

- shmuli

---

使用jQuery：$('#id')[0].scrollIntoView(false); 可以将ID为"id"的元素滚动到可见区域底部。 - alexoviedo999

目前只支持Firefox浏览器。 - tim-we

现在可以在较新版本的Chrome中使用，但是一些额外选项（如平滑滚动）似乎尚未实现。 - Matt Zukowski

更好的做法是：element.scrollIntoView({behavior: "smooth"});。 - blalond

这应该是正确的答案！我在我的 Ionic 1 应用程序上工作过。 - JorgeMadson

Answer 4

您可以使用这个功能以动画格式向下滑动页面。

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");

- user5978325

Answer 5

一行代码以平滑的方式滚动到底部

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

要向上滚动，只需将top设置为0

- TLJ

---

这个解决方案在IE中不起作用。我们是否有任何解决方法可以添加以使其在IE中也能正常工作？ - Akanksha Mohanty

Answer 6

下面应该是跨浏览器的解决方案。它已在Chrome，Firefox，Safari和IE11上进行了测试。

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

在Firefox浏览器中，至少对于版本37.0.2，window.scrollTo(0,document.body.scrollHeight);无法正常工作。

- PixelsTech

---

它在Firefox 62.0.3中可以工作，但我不知道他们是什么时候修复的。 - zb226

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight); - 滚动不平滑。如何使滚动平滑 @PixelsTech - Akanksha Mohanty

您可以为滚动添加选项。 - maazakn

Answer 7

CSS-Only？！

一种有趣的仅使用CSS的替代方案：

display: flex; 
flex-direction: column-reverse;

  /* ...probably usually along with: */

overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

虽然它不是百分之百可靠的, 但我在几个情况下都发现它很有用。

文档: flex, flex-direction, overflow-y

---

^演示：

var i=0, foo='Lorem Ipsum & foo in bar or blah ! on and'.split(' ');
setInterval(function(){demo.innerHTML+=foo[i++%foo.length]+' '},200)

#demo{ display:flex;
       flex-direction:column-reverse;
       overflow-y:scroll;
       width:150px; 
       height:150px;
       border:3px solid black; }
body{ font-family:arial,sans-serif; 
      font-size:15px; }

Autoscrolling demo:🐾
<div id='demo'></div>

- ashleedawg

---

请注意，当使用多个元素（例如段落）来显示文本时，会出现视觉呈现和DOM顺序之间的脱节，这将对使用屏幕阅读器的用户产生负面影响。此类用户将无法访问正确的阅读顺序。 - Marcio Duarte

Answer 8

有时网页会在滚动到底部时继续延伸（例如在社交网络中），为了向下滚动到页面的最底部，我使用以下脚本：

var scrollInterval = setInterval(function() { 
    document.documentElement.scrollTop = document.documentElement.scrollHeight;
}, 50);

如果您在浏览器的JavaScript控制台中，停止滚动可能会很有用，因此请添加：

var stopScroll = function() { clearInterval(scrollInterval); };

然后使用stopScroll();。

如果您需要滚动到特定的元素，请使用：

var element = document.querySelector(".element-selector");
element.scrollIntoView();

或者是用于自动滚动到特定元素（或停止页面滚动间隔）的通用脚本：

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.documentElement.scrollTop + window.innerHeight) != document.documentElement.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.documentElement.scrollTop = document.documentElement.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);

- Konard

---

让大小等于($("div[class*='card-inserted']")).length;($("div[class*='card-inserted']"))[size -1].scrollIntoView(); - nobjta_9x_tq

@nobjta_9x_tq 只有在页面加载到最后才能起作用。 - Konard

Answer 9

您可以在需要调用它的任何地方使用此函数：

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

- NrNazifi

---

对我来说，在最新的Chrome浏览器中，document.getElementById('copyright').scrollTop += 10不起作用...仍然是零... - Kyle Baker

Answer 10

你也可以使用动画来实现这个效果，非常简单

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

希望有所帮助，谢谢

- Ricardo Vieira