我有一份问题列表。当我点击第一个问题时,它应该自动将我带到页面底部的特定元素。
如何使用jQuery实现这一功能?
如何使用jQuery实现这一功能?
有很多答案试图计算文档的高度。但对我来说,它们都没有正确计算。然而,以下两个方法都有效:
jquery
$('html,body').animate({scrollTop: 9999});
或者只是js
window.scrollTo(0,9999);
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
像Chrome这样的浏览器具有内置预设,可以记住刷新后你在页面上的位置。仅使用 window.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
如果您想滚动到特定的元素,一种简单的方法是:
每当您想向下滚动时,请调用此函数。
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>
您可以将任何id
附加到链接元素的href
属性以引用它:
<a href="#myLink" id="myLink">
Click me
</a>
Click me
时,导航会导航到 Click me
本身。虽然来晚了,但这里有一些仅使用JavaScript代码将任何元素滚动到底部的简单方法:
function scrollToBottom(e) {
e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
function SomeFunction() {
// your code
// Pass an id attribute to scroll to. The # is required
Gentle_Anchors.Setup('#destination');
// maybe some more code
}
测试兼容性:
要在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)", "");
//**** scroll to bottom if at bottom
function scrollbottom() {
if (typeof(scr1)!='undefined') clearTimeout(scr1)
var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
scr1=setTimeout(function(){scrollbottom()},200)
}
scr1=setTimeout(function(){scrollbottom()},200)
我放弃了scrollto,转而尝试了锚点方法:
<a href="#target_id_at_bottom">scroll to the bottom</a>
html,
body {
scroll-behavior: smooth;
}
祝你有美好的一天!
<div id="mydiv1">[your contents]</div>
document.getElementById("mydiv1").scrollIntoView();