機種別ハイスコア(80点~)タイトルを見る

スマホで高画質なPCゲームをプレイ可能!

事前登録で1~2ヶ月間無料 + 半年間の料金が半額に!

HP・ブログ関連

ページ内リンクをスムーズスクロールで滑らかに移動させる方法(jQuery)

ページ内のリンクをクリックした際に目的箇所まで滑らかに移動するスムーズスクロールを簡単に適用する方法について紹介します!

スムーズスクロールを適用すると↓のリンクのように目的地まで滑らかにスクロール移動することができます。

スムーズスクロールを適用する事で遷移時の見てくれも良くなりますし、スクロールして移動するので移動先の場所が分かり易くなるという利点があります。

職業ユーチューバーにオススメ!

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・カード

当サイトからの入会で
初年度の年会費0円(無料)

20歳から入手可能な一流ゴールドカード

会社員・個人事業主・法人代表者のいずれでも発行可能

アメリカン・エキスプレス®
・ビジネス・ゴールド・カード

当サイトからの入会で
初年度年会費0円(無料) 3万ポイント

jQuery行の追加

スムーズスクロールを適用したいページの<head></head>内に以下の行を追加してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>

  • 1行目はjQuery読み出し行です
  • 7行目のvar speedで移動時の速度を指定します
  • 11行目でページ内に含まれる"#"の付くリンク全てにスムーズスクロールを適用しています

これだけでスムーズスクロールの適用は完了です!ためしにページ内リンクをクリックし、滑らかに遷移するかを確認してみてください。

ゲームも仕事も快適に!

2020年9月時点:最も人気なゲーミングPCはこちら

スマホで高画質なPCゲームをプレイ可能!
2020年7月末までの登録
最大61日間全ユーザー無料
2020年7月末までの登録で、最大61日間全ユーザー無料

関連コンテンツ

機種別ハイスコア(80点~)タイトルを見る

機種別ハイスコア(80点~)タイトルを見る

-HP・ブログ関連
-, , , , , ,

Copyright© ゲマステ!- Gamers Station , 2020 All Rights Reserved.