【jQuery】スムーススクロール
はじめに
どうも、NNCの石上です。
突然ですが、上に目次がありますよね？何かしらの項目をクリックしてみると、対応したセクションまでスクロールすると思います。
今回は、「これ」を作ります。
スムーススクロール
これは『スムーススクロール』機能と呼ばれるものです。
ボタン等を押すと、該当箇所までアニメーションで移動できる機能になります。今回は、矢印を押すとページの一番上まで飛べるようにしたいと思います。
ページのトップです。ここからずーっとスクロールしていって…
まだスクロールして…
ページの一番下まで来ました。
ここで右下の矢印をクリックすると…
ページの一番上まで戻ってこれます。
実際のコード
それでは、実際のコードを見ていきましょう。
今回は分量少なめです。
<body>
<div class="l-wrap">
<main class="l-main">
<h1>Smooth Scroll</h1>
<div>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis commodi pariatur ad distinctio porro? Quas quasi, doloremque, odit tempora facilis voluptate perferendis dolore repellat fugiat eveniet ad, accusantium eos. Sunt?
Facilis nihil nulla voluptate aliquid asperiores tenetur quaerat rem magni aut blanditiis ratione, architecto suscipit repellendus molestias deserunt et aliquam. Error est vero vitae impedit, amet voluptatibus maiores consectetur quis!
Quia autem delectus possimus iusto esse, porro illum hic rem nostrum est laudantium, doloremque quam ea aliquam accusamus neque repellat quos reiciendis vel dolores quisquam. Ullam asperiores quod corporis eos!
Atque voluptas fugiat nemo. Molestiae dicta vero quidem quasi temporibus libero laudantium maiores necessitatibus ipsam nobis ab dolore laborum mollitia possimus repellat qui, corporis officia nihil alias quia dignissimos amet!
Tempora necessitatibus dolores ipsum labore, vero nobis deleniti provident odio assumenda! Omnis dolorem sunt delectus ad necessitatibus, minima cum cupiditate repudiandae. Vel, distinctio. Deserunt et laboriosam voluptas numquam, similique aliquid!
</p>
</div>
</main>
</div>
<div class="c-pagetop"></div>
</body>/* メインの文章 */
.l-main {
width: 1000px;
margin: 0 auto;
padding: 60px;
}
.l-main h1 {
font-family: serif;
font-size: 3.2rem;
margin-bottom: 50px;
}
.l-main p {
margin-bottom: 25px;
font-size: 1.6rem;
letter-spacing: 1.6px;
line-height: 1.6;
}
.l-main p:last-of-type {
margin-bottom: 0;
}
/* 右下のボタン */
.c-pagetop {
position: fixed;
bottom: 30px;
right: 30px;
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 30px 10px;
border-color: transparent transparent #333 transparent;
cursor: pointer;
}$('.c-pagetop').on('click',function(){
var main = $('.l-main').offset().top;
$('html').animate({scrollTop:main},1000);
});解説
大まかな流れは以下のようになります。
1.ボタンをクリックした時に、
2.ページトップの座標を取得・変数に格納し、
3.その座標までアニメーションで移動する。
一つ一つ確認していきましょう。
ページトップの座標を取得するにあたっては、offsetメソッドを利用したいと思います。このメソッドでは、対象の表示位置を座標で取得できます。
var main = $('.l-main').offset().top;メインコンテンツ全体を囲んでいるdiv.l-mainの座標を取得すれば、ページの一番上まで飛べそうですね。このメソッドではtop/leftの両方の値を取得できるのですが、今回はtopだけでOKなので上のように記述しましょう。
あとはいかにしてアニメーションさせるか、ですね。
$('html').animate({scrollTop:main},1000);html全体を対象として、それをページの一番上までアニメーションさせます。animateメソッドの引数に「scrollTop: 任意の変数/値 (ここではmain)」と記述することで、変数mainに格納した座標まで移動してくれるようになります。また、animateメソッドではアニメーションの所要時間を設定することも可能です。ミリ秒単位になるので、例えば「300」だったら「0.3秒」、「3000」だったら「3秒」になります。今回は1000で設定したので、1秒間かけてアニメーションしてくれます。
この考え方を応用するとページの一番上だけでなく、ページ内の特定のコンテンツまで移動させたりすることもできそうですね！
今回はここまでです！
こちらの記事はいかがでしたか？
+1
+1
+1
+1
