自动滚动到页面底部

Question

考虑一下我有一个问题清单.当我点击第一个问题时,它会自动将我带到页面底部.

事实上,我知道这可以使用jQuery完成.

那么,你能给我一些文件或一些链接,我可以找到这个问题的答案吗？

编辑:需要滚动到页面底部的特定HTML 元素

Answer 1

jQuery没有必要.我从谷歌搜索获得的大多数顶级成绩给了我这样的答案:

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

如果您有嵌套元素,则文档可能无法滚动.在这种情况下,您需要定位滚动的元素并使用它的滚动高度.

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

您可以将其与onclick您的问题事件联系起来(即<div onclick="ScrollToBottom()" ...).

您可以查看一些其他来源:

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

Answer 2

如果要将整个页面滚动到底部:

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

查看样品上的jsfiddle

如果要将元素滚动到底部:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

这就是它的工作原理:

参考:scrollTop,scrollHeight,clientHeight

更新:最新版本的Chrome(61+)和Firefox不支持滚动正文,请参阅:https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Answer 3

香草JS实施:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Answer 4

您可以使用它以动画格式向下浏览页面.

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

Answer 5

仅CSS？！

一个有趣的纯 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>

Answer 6

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

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

window.scrollTo(0,document.body.scrollHeight); 不适用于Firefox,至少对于Firefox 37.0.2

Answer 7

一个衬垫平滑滚动到底部

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

向上滚动只需设置top为0

Answer 8

您可以在任何需要调用它的地方使用此功能:

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

}

jquery.com:ScrollTo

Answer 9

你也可以用动画做到这一点,非常简单

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

希望有所帮助,谢谢

Answer 10

这是一个对我有用的方法：

预期结果：

• 没有滚动动画
• 首次加载时加载到页面底部
• 所有刷新时都会加载到页面底部

代码：

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

为什么这比其他方法更有效：

Chrome 等浏览器有一个内置预设，可以在刷新后记住您在页面上的位置。只是 awindow.onload不起作用，因为在您调用以下行之后，您的浏览器会自动将您滚动回刷新之前的位置：

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

这就是为什么我们需要添加：

history.scrollRestoration = "manual";

首先window.onload禁用该内置功能。

参考：

文档window.onload： https: //developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

文档window.scrollTo： https: //developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

文档history.scrollRestoration： https: //developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

Answer 11

有时页面会滚动到按钮(例如在社交网络中),向下滚动到最后(页面的最终按钮)我使用此脚本:

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

Answer 12

您可以将任何附加id到链接元素的引用属性href：

<a href="#myLink" id="myLink">
    Click me
</a>

在上面的示例中，当用户单击Click me页面底部时，导航将导航到Click me自身。

Answer 13

如果您想向下滚动到特定元素，这是一种简单的方法。

每当您想向下滚动时调用此函数。

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}

ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}

<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

Answer 14

这么多答案试图计算文档的高度。但它对我来说计算不正确。但是，这两种方法都有效：

查询

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

或者只是js

    window.scrollTo(0,9999);