# 安裝核心庫
npm install scroll-to --save
# 或 yarn
yarn add scroll-to

<script src="https://unpkg.com/scroll-to@latest/dist/scroll-to.min.js"></script>

// 1. 導入 scroll-to
import scrollTo from 'scroll-to';

// 2. 基礎使用：滾動到頁面指定坐標（x: 0, y: 300）
scrollTo(0, 300, {
  duration: 500, // 滾動動畫時長，單位ms（默認300ms）
  ease: 'out-circ' // 緩動效果（默認out-circ，可選：in-out-quart、linear等）
});

// 3. 滾動到指定DOM元素（更常用）
const targetElement = document.getElementById('target');
if (targetElement) {
  // 獲取元素的頂部偏移量
  const top = targetElement.getBoundingClientRect().top + window.scrollY;
  scrollTo(0, top, { duration: 600 });
}

<button onclick="scrollToTarget()">滾動到底部</button>
<div id="bottom" style="margin-top: 1000px;">底部區(qū)域</div>

<script src="https://unpkg.com/scroll-to@latest/dist/scroll-to.min.js"></script>
<script>
function scrollToTarget() {
  const bottomElement = document.getElementById('bottom');
  const top = bottomElement.getBoundingClientRect().top + window.scrollY;
  // 全局調(diào)用 scrollTo
  scrollTo(0, top, {
    duration: 800,
    ease: 'linear' // 線性緩動（勻速滾動）
  });
}
</script>

import scrollTo from 'scroll-to';

// 1. 滾動到頁面頂部
function scrollToTop() {
  scrollTo(0, 0, {
    duration: 400,
    ease: 'out-circ',
    callback: () => {
      console.log('已滾動到頂部');
    }
  });
}

// 2. 滾動到指定ID的元素
function scrollToElement(id) {
  const el = document.getElementById(id);
  if (!el) return;
  
  // 計算元素相對于視口的頂部偏移 + 當前滾動距離
  const offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
  scrollTo(0, offsetTop, { duration: 500 });
}

// 調(diào)用示例
document.querySelector('#to-top').addEventListener('click', scrollToTop);
document.querySelector('#to-section').addEventListener('click', () => {
  scrollToElement('section-1');
});