我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
我有一份问题清单。当我点击第一个问题时,它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
在Selenium中向下滚动使用以下代码:
直到底部下降,滚动直到页面的高度。 使用下面的javascript代码,可以在javascript和React中正常工作。
JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object)
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
其他回答
如果在您想要滚动到的位置或附近的任何类型的标记中有一个ID,那么只需使用scrollIntoView函数编写一行JavaScript即可。例如,假设您所讨论的元素是ID为“mydiv1”的DIV
<div id="mydiv1">[your contents]</div>
然后运行JavaScript命令
document.getElementById("mydiv1").scrollIntoView();
根本不需要JQuery。 希望这能有所帮助。
香草JS实现:
element.scrollIntoView(false);
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
你可以在任何需要调用它的地方使用这个函数:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
jquery.com ScrollTo
一图胜千言万语:
关键是:
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
它正在使用文档。documentElement,它是<html>元素。这就像使用window,但这只是我个人的偏好,因为如果它不是整个页面,而是一个容器,它就像这样工作,除了你改变文档。正文和文档。documentElement到document.querySelector("#container-id")。
例子:
let cLines = 0; let timerID = setInterval(function() { let elSomeContent = document.createElement("div"); if (++cLines > 33) { clearInterval(timerID); elSomeContent.innerText = "That's all folks!"; } else { elSomeContent.innerText = new Date().toLocaleDateString("en", { dateStyle: "long", timeStyle: "medium" }); } document.body.appendChild(elSomeContent); document.documentElement.scrollTo({ left: 0, top: document.documentElement.scrollHeight - document.documentElement.clientHeight, behavior: 'smooth' }); }, 1000); body { font: 27px Arial, sans-serif; background: #ffc; color: #333; }
如果没有scrollTo(),您可以比较两者的差异:
let cLines = 0; let timerID = setInterval(function() { let elSomeContent = document.createElement("div"); if (++cLines > 33) { clearInterval(timerID); elSomeContent.innerText = "That's all folks!"; } else { elSomeContent.innerText = new Date().toLocaleDateString("en", { dateStyle: "long", timeStyle: "medium" }); } document.body.appendChild(elSomeContent); }, 1000); body { font: 27px Arial, sans-serif; background: #ffc; color: #333; }
你也可以用动画来做这个,非常简单
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
希望有所帮助, 谢谢你!