jQueryコピペで実現！ページ内遷移をスムーズに【スムーススクロール】

オトナ帝国 | 昔懐かしいゲームで遊べる秘密基地

2021年11月13日 15:30

前回のjQuery解説編・ハンバーガメニュー編に続いて、今回はjQueryを使って実際の実装について語っていきたいと思います。オトナ帝国のサイトではいくつかjQueryを動かしていますが、今回はスムーススクロール編になります。

今日の内容もフロントエンドエンジニア初学者向けです

エンジニアでないと面白くないかもです・・(笑)

スムーススクロールとは？

そもそもスクロールとは・・・wikipediaによると、

テキスト・絵・画像など画面に収まりきらないコンテンツを水平または垂直にスライドさせて表示する手法。

ということであり、それをスムース（英訳：smooth）にしようということ。

smooth：(表面などの)なめらかな、すべすべした、平坦(へいたん)な、でこぼこのない、静かな、平穏な、ぎざぎざのない、つやのある、毛のない、無毛の

まぁ一言でいうと、同一Webページ内の遷移についてスムーズにしようぜ！ということになっています。

オトナ帝国のサイトでいうところの下記です。PCのほうがわかりやすいです

スムーススクロール有効時・無効時の比較

左がスムーススクロールあり、右がスムーススクロールなしです。その名前の通りスムースだなという感じわかりますか？(笑)

「スムーススクロールがなし」のほうは、画面遷移したような印象を受けますよね。ちなみに下記からデモページに実際にアクセスできます。

スムーススクロールありver

スムーススクロールなしver

スムーススクロールの組み方について

ここからは実際のソースを掲載していきます。主にjQueryの部分が参考になるかと。あとは好みで変えていただいておもいいかもしれません。

jQueryの中身

//jsファイル
$(function () {
 //smoothscroll
 (function () {
   $(".js-target").on("click touchend", function () {
     var speed = 500;
     var href = $(this).attr("href");
     var target = $(href == "#" || href == "" ? "html" : href);
     var position = target.offset().top;
     $("html, body").animate({ scrollTop: position }, speed, "swing");
     return false;
   });
 })();
})();

$(".js-target")を$('a[href^="#"]')みたいに変えると、aタグでid遷移させようとしているもの（アンカーでサイト内移動させようとするのもの）にすべて適用にするので、実用的には下記になります。

animateでswingしているので、speed = 500は好みで変えてみてください！

//jsファイル
$(function () {
 //smoothscroll
 (function () {
   $('a[href^="#"]').on("click touchend", function () {
     var speed = 500;
     var href = $(this).attr("href");
     var target = $(href == "#" || href == "" ? "html" : href);
     var position = target.offset().top;
     $("html, body").animate({ scrollTop: position }, speed, "swing");
     return false;
   });
 })();
})();

htmlの中身

今回はわかりやすくするために js-targetというclassを使用しているだけですので、実用的にはjs-targetの記載は不要です。

<!DOCTYPE html>
<html lang="ja">
 <head>
   <meta charset="utf-8" />
   <title>スムーススクロールあり</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta http-equiv="content-language" content="ja" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <link rel="stylesheet" href="./hoge.css" />
 </head>
 <body>
   <div class="container">
     <div class="contents">
       <h1 class="contents-head">スムーススクロールあり</h1>
       <p class="smooth-link"><a href="./index_B.html">スムーススクロールなしへ</a></p>
       <p class="smooth-1" id="smooth-1"><a class="smooth-text js-target" href="#smooth-2">ここをクリック</a></p>
       <p class="smooth-2" id="smooth-2">ここに移動<br /><a class="smooth-text js-target" href="#smooth-1">ここから帰る</a></p>
     </div>
   </div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="./hoge.js"></script>
 </body>
</html>

CSSの中身

まぁこれは好き好きで変えてください～。今回は本題とあまり関係ないので省略します。

//cssファイル
@charset "UTF-8";
body {
 margin: 0;
}
.contents {
 position: relative;
}

.contents-head {
 text-align: center;
}

.smooth-link {
 text-align: center;
 font-size: 30px;
}

.smooth-1 {
 background-color: #f0f;
 min-height: 1500px;
 text-align: center;
 font-size: 30px;
 margin: 0;
 color: #fff;
}

.smooth-2 {
 background-color: #00cfcf;
 min-height: 1500px;
 text-align: center;
 font-size: 30px;
 margin: 0;
 color: #fff;
}

.smooth-text {
 color: #fff;
 font-weight: bold;
}

最後に

今回は久々にjQuery記事を書いてみました～、一番時間がかかったのは実は、スムーススクロール有り無しのアニメーションgif動画を作ることだったりするんですが・・・(笑)

スムーススクロール、名前格好いいですよね、Web界隈無駄に格好いいカタカナ多い気がしますww

良かったら、エンジニアあるあるの記事も見てみてください。こちらはエンジニアじゃなくても比較的楽しめるかもです～

また書いていきたいと思います、それでは。

ゲームし放題の施設「オトナ帝国」の２拠点目となる浅草橋基地を作るにあたり、クラウドファンディングを実施しています！支援していただけると「懐かしさに浸れる秘密基地」をいち早く体験して頂けます。限定数のあるメニューもあるのでご興味ある方はお早めに！

オトナ帝国ってなに？はこちらに詳しくまとめてます！ https://bit.ly/3kd1KFk