1
// 元素頂部對齊視窗頂部（預設）
2
element.scrollIntoView(true);
3

4
// 元素底部對齊視窗底部
5
element.scrollIntoView(false);

1
element.scrollIntoView({
2
  behavior: 'smooth',   // 'auto' | 'smooth' — 滾動動畫
3
  block: 'center',      // 'start' | 'center' | 'end' | 'nearest' — 垂直對齊
4
  inline: 'nearest'     // 'start' | 'center' | 'end' | 'nearest' — 水平對齊
5
});

1
// 數值參數
2
window.scrollTo(0, 500); // 滾動到距頂部 500px
3

4
// 選項物件
5
window.scrollTo({
6
  top: 500,
7
  left: 0,
8
  behavior: 'smooth'
9
});

1
// 從目前位置向下滾動 300px
2
window.scrollBy({ top: 300, behavior: 'smooth' });
3

4
// 向上滾動
5
window.scrollBy({ top: -300, behavior: 'smooth' });

1
/* 所有可能被滾動到的錨點元素 */
2
[id] {
3
  scroll-margin-top: 80px; /* 導覽列高度 + 一點留白 */
4
}
5

6
/* 或針對特定元素 */
7
h2, h3, h4 {
8
  scroll-margin-top: 80px;
9
}

1
:root {
2
  --navbar-height: 64px;
3
  --scroll-offset: calc(var(--navbar-height) + 16px);
4
}
5

6
[id] {
7
  scroll-margin-top: var(--scroll-offset);
8
}

1
const observer = new IntersectionObserver(
2
  (entries) => {
3
    entries.forEach(entry => {
4
      const tocLink = document.querySelector(
5
        `.toc-link[href="#${entry.target.id}"]`
6
      );
7
      if (entry.isIntersecting) {
8
        // 移除所有高亮
9
        document.querySelectorAll('.toc-link.active')
10
          .forEach(el => el.classList.remove('active'));
11
        // 高亮目前章節
12
        tocLink?.classList.add('active');
13
      }
14
    });
15
  },
16
  { rootMargin: '-80px 0px -60% 0px' }
17
);
18

19
// 觀察所有章節標題
20
document.querySelectorAll('h2[id], h3[id]').forEach(heading => {
21
  observer.observe(heading);
22
});

1
const chatContainer = document.querySelector('.chat-messages');
2
const lastMessage = chatContainer.lastElementChild;
3

4
// 只在使用者已經在底部時自動滾動
5
const observer = new IntersectionObserver(([entry]) => {
6
  if (entry.isIntersecting) {
7
    // 使用者在底部，新訊息進來時自動捲動
8
    lastMessage.scrollIntoView({ behavior: 'smooth', block: 'end' });
9
  }
10
}, { root: chatContainer });
11

12
// 觀察倒數第二則訊息
13
const sentinel = chatContainer.children[chatContainer.children.length - 2];
14
if (sentinel) observer.observe(sentinel);

1
// Vue 3 - 使用 nextTick
2
import { nextTick } from 'vue';
3

4
async function scrollToSection(id) {
5
  await nextTick();
6
  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
7
}
8

9
// React - 使用 useEffect
10
useEffect(() => {
11
  if (hash) {
12
    const el = document.getElementById(hash.slice(1));
13
    el?.scrollIntoView({ behavior: 'smooth' });
14
  }
15
}, [hash]);

1
const container = document.querySelector('.scrollable-panel');
2
const target = container.querySelector('.target-item');
3

4
// 只捲動 container，不影響 window
5
container.scrollTo({
6
  top: target.offsetTop - container.offsetTop,
7
  behavior: 'smooth'
8
});