超超初心者向け漫画サイトのつくり方【jQueryで、するするっとスクロールする】

するするっとスクロールする＝スムーススクロールを実装します～

使いどころで一番多い、ボタンクリックでページ先頭にする～っと戻っていくヤツを設置してみます。

jQuery本体の読み込みがまだの人は、先に読み込んでおいてください。

jQueryの読み込み方法

  1. スムーススクロールさせる手順
  2. 戻り先に名前を付ける
  3. 戻るボタンを設置する
  4. jQueryを記述する
  5. まとめ

スムーススクロールさせる手順

１、戻り先に名前を付ける

２、戻るボタンを設置する

３、jQueryを記述する

です。

じゃ早速、実装していきましょー

戻り先に名前を付ける

今回は「ページの先頭に戻る」ボタンなので、ページの一番上に位置しているロゴに名前を付けて、この名前を戻り先にします。

<h1 id="top"><img src="ロゴ画像" alt="ロゴ画像の説明"></h1>

h1に、idで「top」という名を命名しました。

戻るボタンを設置する

ボタンは、出来れば透過pngで作ってください。

svgが作れる人は、svgで作ってください。

↑よく見るタイプのマークで作るのが無難。何も説明しなくても、ページ先頭に戻るボタンだと気づいてもらえる便利なマーク

button.pngという名前で保存します。（好きな名前にしてもいいよ！）

これをhtmlに記述して設置

<a href="#top"><img src="button.png" alt="" class="modoru-button"></a>

リンク先をロゴ画像に付けた名前のtopにして、ボタンの名前を「modoru-button」にしました。

これで、戻るボタンの画像をクリックするとロゴ画像の位置にジャンプするようになりました。

次に、CSSで右下に固定します。

.modoru-button {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

これで設置完了です。

いよいよ、jQueryを記述して動かしていきます。

jQueryを記述する

ちょっと感覚的に読めるようにダッサイ名前で作ってみました。

恥ずかしい人は、「jQuery　スムーススクロール」で検索して恥ずかしくない記述方法を見つけてください。丸投げ。

恥なんのその。って人は、＜/body＞のすぐ上に以下の記述をしてください。

<script>
　$('a[href^="#"]').click(function () {
  var modorubutton = $(this).attr("href");
  var modorubasyo = $(modorubutton).offset().top;
  $('body,html').animate({ scrollTop: modorubasyo }, 600, 'swing');
  return false;
 　});
</script>

３行目～５行目の「modorubutton」と「modorubasyo」、この２つは恥ずかしくない名前に変えてOKです。

５行目の「600」が、するする～のスピードです。小さい数字だと早く、大きい数字だとゆったり進みます。好みの速さにしてください。

同じく５行目の、swingはlinearに変更してもOKです。違いは、swingが、ゆっくり動き出してゆっくり止まる。linearが、一定速度で動きます。

この３か所以外は、そのままで使ってください。

まとめ

これで、するする～とページ先頭に戻っていくボタンが設置できました～わーい。

意外とちょろくないですか？？

コピペだけで実装可能です。

縦スクロールタイプの漫画サイトをつくる人は、漫画ページにぜひ設置してください。

コメント

ホーム
トップ