自动滚动到页面底部

JavaScript

凯乐

2020-04-07

考虑我有一个问题清单。当我单击第一个问题时,它应该自动带我到页面底部。

实际上,我确实知道可以使用jQuery完成此操作。

因此,您能为我提供一些文档或一些链接,以找到该问题的答案吗?

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

第4036篇《自动滚动到页面底部》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

10个回答
GO 2020.04.07

window.scrollTo(0,1e10);

一直有效。

1e10 is a big number. so its always the end of the page.

小卤蛋宝儿 2020.04.07

对于在Selenium中向下滚动,请使用以下代码:

直到底部下拉菜单,滚动到页面高度。使用以下在JavaScript和React中都可以正常工作的javascript代码。

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
理查德泡芙 2020.04.07

您可以将任何附加idhref链接元素的引用属性

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

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

卡卡西Near 2020.04.07

一根衬纸可平滑滚动到底部

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

要向上滚动,只需将其设置top0

番长 2020.04.07

聚会晚了,但是这里有一些简单的纯JavaScript代码,可将任何元素滚动到底部:

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
卡卡西 2020.04.07

有时,页面在滚动时会扩展到buttom(例如在社交网络中),然后向下滚动到末尾(页面的最终buttom),我使用以下脚本:

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);
十三 2020.04.07

下面应该是跨浏览器解决方案。已在Chrome,Firefox,Safari和IE11上经过测试

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

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

蛋蛋猿 2020.04.07

Vanilla JS实现:

element.scrollIntoView(false);

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

凯西里 2020.04.07

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

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

}

jquery.com:ScrollTo

古一 2020.04.07

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

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

这就是它的工作方式:

在此处输入图片说明

参考:scrollTopscrollHeightclientHeight

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android