问题

我在页面上放了一些超链接，用户访问页面时会阅读这些链接。为了使页面更有吸引力，我可以让页面滚动到同一页面内的其他部分。我已经添加了原生JavaScript来实现平滑滚动，但似乎没有起作用。我想知道代码有什么问题。

// 选择所有带有哈希的链接
const links = document.querySelectorAll('a[href^="#"]');
// 为每个链接添加点击事件监听器
links.forEach(link => {
  link.addEventListener('click', event => {
    // 阻止默认的锚点行为
    event.preventDefault();
    // 获取目标元素及其顶部偏移量
    const targetId = link.hash.slice(1);
    const targetElement = document.getElementById(targetId);
    if (!targetElement) {
      console.error(`无法找到ID为"${targetId}"的元素`);
      return;
    }
    const targetOffset = targetElement.offsetTop;
    // 平滑滚动到目标元素
    window.scrollTo({
      top: targetOffset,
      behavior: 'smooth'
    });
  });
});

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>平滑滚动示例</title>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="#section1">部分1</a></li>
        <li><a href="#section2">部分2</a></li>
        <li><a href="#section3">部分3</a></li>
      </ul>
    </nav>
    <main>
      <section id="section1">
        <h1>部分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>部分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>
      </section>
      <section id="section3">
        <h1>部分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>
      </section>
    </main>
  </body>
</html>

英文:

I have a couple of hyperlinks on my page.that users will read when they visit the page.to make it attractive I can make the page scroll toward other section within the same page. i have added vanilla JavaScript to get smooth scroll but it seems not to work . I am wondering why isn't working at all.what is wrong with the code?

      // Select all links with hashes
const links = document.querySelectorAll(&#39;a[href^=&quot;#&quot;]&#39;);
// Add a click event listener to each link
links.forEach(link =&gt; {
link.addEventListener(&#39;click&#39;, event =&gt; {
// 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 &quot;${targetId}&quot;`);
return;
}
const targetOffset = targetElement.offsetTop;
// Scroll smoothly to the target element
window.scrollTo({
top: targetOffset,
behavior: &#39;smooth&#39;
});
});
});

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Smooth Scroll Example&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#section1&quot;&gt;Section 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#section2&quot;&gt;Section 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#section3&quot;&gt;Section 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;main&gt;
&lt;section id=&quot;section1&quot;&gt;
&lt;h1&gt;Section 1&lt;/h1&gt;
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;section2&quot;&gt;
&lt;h1&gt;Section 2&lt;/h1&gt;
&lt;p&gt;
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.
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;section3&quot;&gt;
&lt;h1&gt;Section 3&lt;/h1&gt;
&lt;p&gt;
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.
&lt;p&gt;
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.
&lt;/p&gt;
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/p&gt;
&lt;/section&gt;
&lt;/main&gt;
&lt;/body&gt;
&lt;/html&gt;

答案1

得分: 1

你的代码可以简化使用委托，在调试之前。

你的 scrollTo 的替代方法是 scrollIntoView。

英文:

Your code works but can be simplified to use delegation before you debug

Alternative for your scrollTo is scrollIntoView

document.querySelector(&#39;nav&#39;).addEventListener(&#39;click&#39;, (e) =&gt; {
let tgt = e.target.closest(&#39;li&#39;).querySelector(&#39;a&#39;); // make sure the whole LI can be used
if (!tgt) return;
// Prevent default anchor behavior
e.preventDefault();
// Get the target element
const targetId = tgt.hash.slice(1);
const targetElement = document.getElementById(targetId);
if (!targetElement) {
console.error(`Unable to find element with id &quot;${targetId}&quot;`);
return;
}
targetElement.scrollIntoView({ behavior: &#39;smooth&#39; });
});

&lt;nav&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&quot;#section1&quot;&gt;Section 1&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#section2&quot;&gt;Section 2&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#section3&quot;&gt;Section 3&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/nav&gt;
&lt;main&gt;
&lt;section id=&quot;section1&quot;&gt;
&lt;h1&gt;Section 1&lt;/h1&gt;
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;section2&quot;&gt;
&lt;h1&gt;Section 2&lt;/h1&gt;
&lt;p&gt;
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.
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/section&gt;
&lt;section id=&quot;section3&quot;&gt;
&lt;h1&gt;Section 3&lt;/h1&gt;
&lt;p&gt;
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.
&lt;p&gt;
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.
&lt;/p&gt;
&lt;p&gt;
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.
&lt;/p&gt;
&lt;/section&gt;
&lt;/main&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

平滑滚动在单击锚链接时不起作用

问题

答案1

如何编写Java代码，从JSON格式的代码中渲染出漂亮的彩色HTML呢？

Postponing .then() calls on a Promise returned from an async JavaScript function until after multiple awaits have run inside the function

How to read Simplified Mandarin Chinese characters From text file and save mp3 file using say command on Mac

如何将一个地图添加到数组中并清空原始地图以存储更多数据。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论