【jQuery】スムーススクロール・発展編
はじめに
どうも、NNCの石上です。
今回はスムーススクロールに関する記事の発展編となります。事前にそちらに目を通しておくことをオススメいたします。
特定箇所へのスクロール
「特定箇所へのスムーススクロール」を作成します。この記事の上の方に「目次」があると思うのですが、それと全く同じシステムです。
ページのトップです。左上にあるナビゲーションの、例えば「bottom」をクリックしてみると…
該当エリアまで来ました。もちろん、ここから他の箇所にもスムーススクロールで移動できます。
実際のコード
実際のコードを見ていきましょう。
<ul class="index">
<li>
<a href="#top">top</a>
</li>
<li>
<a href="#middle">middle</a>
</li>
<li>
<a href="#bottom">bottom</a>
</li>
<li>
<a href="#extra">extra</a>
</li>
</ul>
<div class="paragraph">
<div id="top">
<h2>top</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores dolor obcaecati explicabo excepturi sit rem corrupti voluptates cupiditate illum architecto, reprehenderit iste vel velit enim odit! Natus eius error distinctio.
Itaque mollitia quas dicta vitae earum dolorum inventore aliquid. Itaque ut delectus nemo quidem veniam consequuntur facilis officiis ullam assumenda aut porro sit, incidunt et, veritatis dolorem quisquam id animi?
Voluptatem soluta officiis, quo, ducimus fugit debitis recusandae aspernatur cupiditate mollitia quos autem id pariatur molestias voluptates iure. Eaque cum, ratione magni velit iste praesentium rem facilis beatae quis maxime?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nam qui animi, fugiat nihil blanditiis temporibus laboriosam! Amet, dolor. Quis accusantium ex omnis cum alias? Tempora aliquid sint consequatur inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ea labore dolorem a earum, illo quia vel molestias ipsum repudiandae consectetur debitis, atque exercitationem voluptates ab eligendi. Ipsa, animi iusto!
</p>
</div>
<div id="middle">
<h2>middle</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores dolor obcaecati explicabo excepturi sit rem corrupti voluptates cupiditate illum architecto, reprehenderit iste vel velit enim odit! Natus eius error distinctio.
Itaque mollitia quas dicta vitae earum dolorum inventore aliquid. Itaque ut delectus nemo quidem veniam consequuntur facilis officiis ullam assumenda aut porro sit, incidunt et, veritatis dolorem quisquam id animi?
Voluptatem soluta officiis, quo, ducimus fugit debitis recusandae aspernatur cupiditate mollitia quos autem id pariatur molestias voluptates iure. Eaque cum, ratione magni velit iste praesentium rem facilis beatae quis maxime?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nam qui animi, fugiat nihil blanditiis temporibus laboriosam! Amet, dolor. Quis accusantium ex omnis cum alias? Tempora aliquid sint consequatur inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ea labore dolorem a earum, illo quia vel molestias ipsum repudiandae consectetur debitis, atque exercitationem voluptates ab eligendi. Ipsa, animi iusto!
</p>
</div>
<div id="bottom">
<h2>bottom</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores dolor obcaecati explicabo excepturi sit rem corrupti voluptates cupiditate illum architecto, reprehenderit iste vel velit enim odit! Natus eius error distinctio.
Itaque mollitia quas dicta vitae earum dolorum inventore aliquid. Itaque ut delectus nemo quidem veniam consequuntur facilis officiis ullam assumenda aut porro sit, incidunt et, veritatis dolorem quisquam id animi?
Voluptatem soluta officiis, quo, ducimus fugit debitis recusandae aspernatur cupiditate mollitia quos autem id pariatur molestias voluptates iure. Eaque cum, ratione magni velit iste praesentium rem facilis beatae quis maxime?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nam qui animi, fugiat nihil blanditiis temporibus laboriosam! Amet, dolor. Quis accusantium ex omnis cum alias? Tempora aliquid sint consequatur inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ea labore dolorem a earum, illo quia vel molestias ipsum repudiandae consectetur debitis, atque exercitationem voluptates ab eligendi. Ipsa, animi iusto!
</p>
</div>
<div id="extra">
<h2>extra</h2>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores dolor obcaecati explicabo excepturi sit rem corrupti voluptates cupiditate illum architecto, reprehenderit iste vel velit enim odit! Natus eius error distinctio.
Itaque mollitia quas dicta vitae earum dolorum inventore aliquid. Itaque ut delectus nemo quidem veniam consequuntur facilis officiis ullam assumenda aut porro sit, incidunt et, veritatis dolorem quisquam id animi?
Voluptatem soluta officiis, quo, ducimus fugit debitis recusandae aspernatur cupiditate mollitia quos autem id pariatur molestias voluptates iure. Eaque cum, ratione magni velit iste praesentium rem facilis beatae quis maxime?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet nam qui animi, fugiat nihil blanditiis temporibus laboriosam! Amet, dolor. Quis accusantium ex omnis cum alias? Tempora aliquid sint consequatur inventore.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt ea labore dolorem a earum, illo quia vel molestias ipsum repudiandae consectetur debitis, atque exercitationem voluptates ab eligendi. Ipsa, animi iusto!
</p>
</div>
</div>.index {
position: fixed;
top: 0;
left: 0;
display: flex;
padding: 20px 30px;
margin-bottom: 80px;
background-color: #eee;
}
.index li {
margin-right: 20px;
font-size: 16px;
}
.index li:last-of-type {
margin-bottom: 0;
}
.index a {
color: #333;
text-decoration: none;
}
.paragraph {
font-size: 18px;
letter-spacing: 1.5px;
line-height: 2;
}
.paragraph h2 {
margin-bottom: 20px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
}
.paragraph div {
padding-top: 50px;
margin-bottom: 80px;
}$(function(){
$('a[href^="#"]').on('click',function(){
var href = $(this).attr("href");
var pos = $(href).offset().top;
$('html').animate({scrollTop:pos},1000);
});
})「ul.index」の中のaタグのhref属性に注目してもらうと、各セクションに割り振られてたIDと一致しているのが分かると思います。これにより、ナビゲーションと各セクションの紐付けを行っています。
解説
全体の流れは、以下のようにまとめられると思います。
1.ナビゲーションの項目(a[href^=”#”])をクリックした際に、
2.そのhref属性を取得し、変数に格納
3.href属性と合致したIDを持つセクションの座標を取得し、変数に格納、
4.該当箇所までスクロールさせる
$('a[href^="#"]').on('click',function(){
var href = $(this).attr("href");まずは「href属性に#を持つaタグ」をクリックした際に、そのhref属性を取得します。attrメソッドを使いましょう。【対象要素.attr(href”)】で可能です。
var pos = $(href).offset().top;
$('html').animate({scrollTop:pos},1000);ここまで来たらほとんど完成です。offsetメソッドを用いて、先ほど変数に格納したhref属性の座標を取得します。記述形式は【対象要素.offset().top】となります。aタグのhref属性と各セクションのIDが一致しているため、「href = id」の図式が成り立ち、取得したhref属性と同じidを持つ要素まで移動することが可能となります。
あとはanimateメソッドでその場所までスクロールするように設定してあげれば終了です。
以上で完成です！
こちらの記事はいかがでしたか？
+1
+1
+1
+1
