BLOGブログ
【CSS】アンカーリンクのスクロールを滑らかにする方法
アンカーリンクとは？
アンカーリンクとは、ページ内の特定の位置にジャンプするリンクのことです。
ページ下部にページトップへ戻るボタンをつけることも多いのですが、これまではスムーズスクロールをJavaScriptで実装していました。
ですが、このCSSを使えばライブラリやスクリプトを一切使わずに簡単に実現できます。
html {
scroll-behavior: smooth;
}
実際のコード例
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>スムーズスクロールの例</title>
<style>
html {
scroll-behavior: smooth;
}
section {
padding: 100px 0;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<nav>
<a href=”#section1″>セクション1</a> |
<a href=”#section2″>セクション2</a>
</nav>
<section id=”section1″>
<h2>セクション1</h2>
<p>ここはセクション1の内容です。</p>
</section>
<section id=”section2″>
<h2>セクション2</h2>
<p>ここはセクション2の内容です。</p>
</section>
</body>
</html>
アンカーリンクのスクロールを滑らかにしたいときは、まずはCSSでの対応を試してみてください！
CONTACTお問い合わせ
サービスに関するお問い合わせやお見積もり・ご相談などお気軽にご相談ください。
お問い合わせフォーム
