我在我的页面上有几个超链接。用户访问www.example.com时会看到page.to，这使它很有吸引力。我可以在同一页面内将页面滚动到其他部分。我添加了香草JavaScript来获得平滑滚动，但它似乎不起作用。我想知道为什么不起作用。代码有什么问题？
// Select all links with hashes
const links = document.querySelectorAll('a[href^="#"]');
// Add a click event listener to each link
links.forEach(link => {
link.addEventListener('click', event => {
// Prevent default anchor behavior
event.preventDefault();
// Get the target element and its top offset
const targetId = link.hash.slice(1);
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error(`Unable to find element with id "${targetId}"`);
return;
}
const targetOffset = targetElement.offsetTop;
// Scroll smoothly to the target element
window.scrollTo({
top: targetOffset,
behavior: 'smooth'
});
});
});<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scroll Example</title>
</head>
<body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<main>
<section id="section1">
<h1>Section 1</h1>
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
</p>
</section>
<section id="section2">
<h1>Section 2</h1>
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
</p>
</p>
</section>
<section id="section3">
<h1>Section 3</h1>
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
</p>
<p>
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
Phasellus enim libero, blandit vel sapien vitae, condimentum ultricies magna.
Lorem ipsum is a placeholder text commonly used in design and typesetting.
</p>
</p>
</section>
</main>
</body>
</html>
1条答案
按热度按时间rkkpypqq1#
您的代码可以正常工作，但可以在调试之前使用委托进行简化
scrollTo的替代方法是scrollIntoView