Smooth scrolling(なめらかなスクロール)

1 ページのランディング ページを作成していて、ヘッダー リンクを含むページ セクションへのスクロールを有効にする必要がある場合は、次のことができます。

ターゲット セクションに ID を割り当て、リンクに .smooth-scroll クラスを追加し、適切な位置ハッシュを href 属性に設定します 👇

<!-- Link -->
<a href="#my-section" class="smooth-scroll">View section</a>
<!-- Section -->
<div id="my-section" class="section">
</div>

React と Vue では、この機能をコンポーネントの形式で提供しました。 このコンポーネントは src/components/elements/ フォルダーにあり、名前は SmoothScroll.js (React) / SmoothScroll.vue (Vue) です。 上の例と同様にリンクを返します。

使い方を見てみましょう:

<c-smooth-scroll to='section-id'>View section</c-smooth-scroll>

Scroll duration(スクロール時間)

デフォルトのスクロール遷移には 1 秒かかります。 スクロール アニメーションを速くしたり遅くしたりする場合は、新しい値を ms として定義します 👇

<!-- 2 seconds animation -->
<a href="#my-section" class="smooth-scroll" data-duration="2000">View section</a>

React と Vue で duration prop を使用する 👇

<c-smooth-scroll to="section-id" :duration="2000">View section</c-smooth-scroll>

属性一覧

React

Vue