我有一份问题清单。当我点击第一个问题时，它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
你可以在任何需要调用它的地方使用这个函数:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
jquery.com ScrollTo
其他回答
你也可以用动画来做这个，非常简单
$('html, body').animate({
scrollTop: $('footer').offset().top
//scrollTop: $('#your-id').offset().top
//scrollTop: $('.your-class').offset().top
}, 'slow');
希望有所帮助, 谢谢你！
这里有一个对我有用的方法:
预期结果:
无滚动动画 在第一次加载页面底部加载 加载在页面底部的所有刷新
代码:
<script>
function scrollToBottom() {
window.scrollTo(0, document.body.scrollHeight);
}
history.scrollRestoration = "manual";
window.onload = scrollToBottom;
</script>
为什么这种方法比其他方法更有效:
像Chrome这样的浏览器有一个内置的预设，可以在刷新后记住你在页面上的位置。只是一个窗口。onload不起作用，因为你的浏览器会自动滚动你在刷新之前的位置，在你调用一行后，如:
window.scrollTo(0, document.body.scrollHeight);
这就是为什么我们需要补充:
history.scrollRestoration = "manual";
在窗户前。Onload首先禁用该内置功能。
引用:
窗口的文档。onload: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
窗口的文档。scrollTo: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
历史文档。scrollRestoration: https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration
你可以在任何需要调用它的地方使用这个函数:
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; }
你可以给link元素的引用属性href附加任何id:
<a href="#myLink" id="myLink">
Click me
</a>
在上面的例子中，当用户单击页面底部的“点击我”时，导航导航到“点击我”本身。
