scrollIntoView - 行为不起作用(JavaScript)
scrollIntoView - behavior is not working(JavaScript)
我知道 Whosebug 上还有其他相同问题(2016 年及更早版本),但我都查看了所有问题,但它们没有解决我的问题。
滚动到视图有效,当我单击按钮时页面转到它应该转到的特定部分,但行为 属性 不起作用。
const alllinks = document.querySelectorAll("scroll:link");
alllinks.forEach(function (link) {
link.addEventListener("click", function (e) {
e.preventDefault();
const href = link.getAttribute("href");
// Scroll to top
if (href === "#") {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
//Scroll to other links
else if (href !== "#" && href.startsWith("#")) {
document.getElementById(href).scrollIntoView({
behavior: `smooth`,
});
}
});
});
以下是 html 对所有部分的看法。 (此处仅以一节为例)
<a class="scroll nav-list--item btn" href="#how">How it works</a>
<section class="section-more container" id='how'>...</section>
这就是所需的全部代码。
也添加这些附加属性以使其工作
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
编辑:在你的情况下,你只需要将下面的 css 放在你的主样式文件中,因为滚动不是由你编写的 javascript 代码发生的,它正在发生是因为标签的 href。您甚至可以删除 javascript 代码
* {
scroll-behavior: smooth
}
getElementById的参数必须是元素id值且不能包含"#"。
document.getElementById(href).scrollIntoView({
behavior: `smooth`,
});
此代码块抛出类型错误,因为 document.getElementById(href) with href = "#how" 将 return 未定义,因此当您在 link 中单击时,滚动行为只是 a link 的默认行为。
也许你可以像这样更正它:
document.getElementById(href.slice(1)).scrollIntoView({
behavior: `smooth`,
});
我知道 Whosebug 上还有其他相同问题(2016 年及更早版本),但我都查看了所有问题,但它们没有解决我的问题。
滚动到视图有效,当我单击按钮时页面转到它应该转到的特定部分,但行为 属性 不起作用。
const alllinks = document.querySelectorAll("scroll:link");
alllinks.forEach(function (link) {
link.addEventListener("click", function (e) {
e.preventDefault();
const href = link.getAttribute("href");
// Scroll to top
if (href === "#") {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
//Scroll to other links
else if (href !== "#" && href.startsWith("#")) {
document.getElementById(href).scrollIntoView({
behavior: `smooth`,
});
}
});
});
以下是 html 对所有部分的看法。 (此处仅以一节为例)
<a class="scroll nav-list--item btn" href="#how">How it works</a>
<section class="section-more container" id='how'>...</section>
这就是所需的全部代码。
也添加这些附加属性以使其工作
element.scrollIntoView({
behavior: 'smooth',
block: 'start',
inline: 'nearest'
});
编辑:在你的情况下,你只需要将下面的 css 放在你的主样式文件中,因为滚动不是由你编写的 javascript 代码发生的,它正在发生是因为标签的 href。您甚至可以删除 javascript 代码
* {
scroll-behavior: smooth
}
getElementById的参数必须是元素id值且不能包含"#"。
document.getElementById(href).scrollIntoView({
behavior: `smooth`,
});
此代码块抛出类型错误,因为 document.getElementById(href) with href = "#how" 将 return 未定义,因此当您在 link 中单击时,滚动行为只是 a link 的默认行为。 也许你可以像这样更正它:
document.getElementById(href.slice(1)).scrollIntoView({
behavior: `smooth`,
});