问题

我在页面上放了一些超链接，用户访问页面时会阅读这些链接。为了使页面更有吸引力，我可以让页面滚动到同一页面内的其他部分。我已经添加了原生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

从谷歌搜索结果页面提取URLs

视频源排队功能无意跳过数组元素

API获取函数中声明的数据变量不起作用。

“import * as bootstrap from ‘../node_modules/bootstrap’ work?”

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 在上下文菜单中以大文本形式打开

发表评论