考虑我有一个问题清单。当我单击第一个问题时,它应该自动带我到页面底部。
实际上,我确实知道可以使用jQuery完成此操作。
因此,您能为我提供一些文档或一些链接,以找到该问题的答案吗?
编辑:需要滚动到页面底部的特定HTML 元素
考虑我有一个问题清单。当我单击第一个问题时,它应该自动带我到页面底部。
实际上,我确实知道可以使用jQuery完成此操作。
因此,您能为我提供一些文档或一些链接,以找到该问题的答案吗?
编辑:需要滚动到页面底部的特定HTML 元素
对于在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)", "");
您可以将任何附加id
到href
链接元素的引用属性:
<a href="#myLink" id="myLink">
Click me
</a>
在上面的示例中,当用户单击Click me
页面底部时,导航会导航到Click me
自身。
一根衬纸可平滑滚动到底部
window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });
要向上滚动,只需将其设置top
为0
聚会晚了,但是这里有一些简单的纯JavaScript代码,可将任何元素滚动到底部:
function scrollToBottom(e) {
e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
有时,页面在滚动时会扩展到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);
下面应该是跨浏览器解决方案。已在Chrome,Firefox,Safari和IE11上经过测试
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo(0,document.body.scrollHeight); 不适用于Firefox,至少适用于Firefox 37.0.2
Vanilla JS实现:
element.scrollIntoView(false);
https://developer.mozilla.org/zh-CN/docs/Web/API/element.scrollIntoView
您可以在需要调用此函数的地方使用它:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
如果要将整个页面滚动到底部:
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/
window.scrollTo(0,1e10);
一直有效。
1e10 is a big number. so its always the end of the page.