我有一份问题列表。当我点击第一个问题时,它应该自动将我带到页面底部的特定元素。
如何使用jQuery实现这一功能?
如何使用jQuery实现这一功能?
一张图片胜过千言万语:
关键在于:
document.documentElement.scrollTo({
left: 0,
top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
behavior: 'smooth'
});
它正在使用 document.documentElement
,这是 <html>
元素。就像使用 window
一样,但我个人更喜欢以这种方式做,因为如果不是整个页面而是一个容器,那么它的工作方式就像这样,只需将 document.body
和 document.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;
}