要實(shí)現(xiàn)平滑滾動(dòng)錨點(diǎn)鏈接，只需在CSS中使用scroll-behavior: smooth；1. 在html元素上添加html { scroll-behavior: smooth; }即可啟用全局平滑滾動(dòng)；2. 確保錨鏈接的href屬性指向頁(yè)面內(nèi)正確的ID；3. 若在特定容器內(nèi)滾動(dòng)，則將scroll-behavior: smooth應(yīng)用於該固定高度且?guī)verflow的容器；4. 可通過scroll-margin-top調(diào)整目標(biāo)元素的滾動(dòng)偏移，避免固定頭部遮擋；此方法無需JavaScript，兼容現(xiàn)代瀏覽器，IE不支持。

To create a smooth scrolling anchor link with CSS, you don't need JavaScript—modern browsers support this natively using a simple CSS property.

Use scroll-behavior: smooth

The easiest way to enable smooth scrolling for anchor links is by applying scroll-behavior: smooth on the container that will be scrolled—in most cases, the html element.

 html {
  scroll-behavior: smooth;
}

Once this is added to your CSS, any anchor link (ie, links with href pointing to an in-page ID) will scroll smoothly instead of jumping instantly.

Example HTML:

 <!-- Navigation Links -->
<nav>
  <a href="#section1">Go to Section 1</a>
  <a href="#section2">Go to Section 2</a>
</nav>

<!-- Page Sections -->
<section id="section1">
  <h2>Section 1</h2>
  <p>Content here...</p>
</section>

<section id="section2">
  <h2>Section 2</h2>
  <p>More content here...</p>
</section>

As long as the html element has scroll-behavior: smooth , clicking those links will trigger a smooth vertical scroll to the target section.

Important Notes

• Browser Support : This works in all modern browsers (Chrome, Firefox, Edge, Safari). Internet Explorer does not support it.

  

• Block scrolling containers : If you're scrolling inside a specific container (not the whole page), apply scroll-behavior: smooth to that element instead of html , and make sure it has a fixed height and overflow.

  Example:

   .scroll-container {
    height: 500px;
    overflow-y: scroll;
    scroll-behavior: smooth;
  }

• No effect on instant jumps : If JavaScript manually changes the scroll position (eg, window.scrollTo() without behavior option), it won't be smooth unless specified.

Optional: Customize scroll alignment

You can fine-tune how elements align when scrolling using scroll-margin on the target elements.

For example, if you have a fixed header and want to offset the scroll so the section isn't hidden behind it:

 section {
  scroll-margin-top: 80px; /* Adjust based on header height */
}

This ensures that when the anchor link scrolls to the section, it leaves an 80px gap at the top, avoiding overlap.

Basically, just add scroll-behavior: smooth to your html tag in CSS, make sure your links point to valid IDs, and you're done. No JavaScript required for basic cases.

以上是如何使用CSS創(chuàng)建平滑的滾動(dòng)錨鏈接？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！