スムーススクロールとは、ヘッダーの項目などをクリックして同じページ内の別の位置に移動するときに、滑らかに動いてスクロールする表現のことです。HTMLでページ内リンクを作るだけでは、クリックしたときに瞬時にスクロールしてしまうので、閲覧者に違和感を与えてしまいます。
そのために、スムーススクロールを導入し、サイトのアクセス向上に役立てます。
それでは具体的にHTMLとJSの記述例を載せます。
１）HTML
まずは、ヘッダーの項目です
a タグの箇所で、遷移先のsection のIDを以下の様に記述します
<ul class="pc-nav__items">
<li class="pc-nav__item"><a href="#about-section">About</a></li>
<li class="pc-nav__item"><a href="#service-section">Service</a></li>
<li class="pc-nav__item"><a href="#news-section">News</a></li>
</ul>
そして、遷移先のセクションです。
<section class="about" id="about-section">
（中略）
</section>
更にsmooth-scroll.polyfills.min.jsというファイルをダウンロードして、ご自身の環境にいれて、
以下の様の読み込んで下さい
<script src="./js/smooth-scroll.polyfills.min.js"></script>２）JS
自身のJSファイルに以下の記述をしてください。
var scroll = new SmoothScroll('a[href*="#"]', {
header: '#header'
});
コメント