我有一份问题清单。当我点击第一个问题时，它会自动把我带到页面底部的特定元素。
我如何用jQuery做到这一点?
当前回答
下面是跨浏览器的解决方案。它已经在Chrome、Firefox、Safari和IE11上进行了测试
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo (0, document.body.scrollHeight);不能在Firefox上运行，至少不能在Firefox 37.0.2上运行
其他回答
一图胜千言万语:
关键是:
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; }
滚动整个页面到底部:
const scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;
你可以在这里查看演示
将一个特定的元素滚动到底部:
const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}
下面是演示
它是这样工作的:
参考:scrollTop, scrollHeight, clientHeight
更新:最新版本的Chrome(61+)和Firefox不支持滚动正文，请参阅:https://dev.opera.com/articles/fixing-the-scrolltop-bug/
你可以在任何需要调用它的地方使用这个函数:
function scroll_to(div){
if (div.scrollTop < div.scrollHeight - div.clientHeight)
div.scrollTop += 10; // move down
}
jquery.com ScrollTo
你可以试试Gentle Anchors，一个不错的javascript插件。
例子:
function SomeFunction() {
// your code
// Pass an id attribute to scroll to. The # is required
Gentle_Anchors.Setup('#destination');
// maybe some more code
}
兼容性测试对象:
Mac Firefox, Safari, Opera Windows Firefox, Opera, Safari, Internet Explorer 5.55+ Linux未经测试，但至少Firefox应该没问题
下面是跨浏览器的解决方案。它已经在Chrome、Firefox、Safari和IE11上进行了测试
window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
window.scrollTo (0, document.body.scrollHeight);不能在Firefox上运行，至少不能在Firefox 37.0.2上运行
