福島・埼玉のWEBサイト制作・ホームページ制作会社 キャスパーウゥブデザイン

ご指定された単一記事を表示しています。
2013年7月24日 タグ:

jQuery とっても簡単、ページ内リンクでスムーズスクロール

ページ内リンクでスムーズにスクロール移動させる方法の紹介です。
とても簡単に実装できます。

スムーズスクロール?というかたは、↓の DEMO をご覧になって、どこかリンク部分(下線がある文字)をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。

*味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。

▶ DEMO

INDEX

  1. 手順1:jQueryの記述
  2. 手順2:HTMLの記述
  3. WordPressの場合
  4. サンプルソース
  5. 補足

手順1:jQueryの記述

まず、 <head></head> の間に以下のソースを記述してください。

▲ PAGE TOP

手順2:HTMLの記述

HTMLの記述は、通常のページ内リンクと同じです。
リンク元のaタグは <a href="#ユニークな名前">スクロール先名</a>にして、移動先(リンク先)の要素に id="ユニークな名前" と記述するだけでスクロールします。

Example

リンク元「sectionn1」から、移動先(リンク先)「section1の内容」にページ内リンクさせる場合

リンク元
リンク先

▲ PAGE TOP

WordPressの場合

WordPressの場合は、大元のjQuery.jsは他のプラグインなどを利用していると大抵の場合が自動的に読み込まれます。また「$」を使うとコンフリクトを起こして上手く動かない場合があるので「手順1:jQueryの記述」のコード内容と、記述する箇所を少し変更します。

記述場所
<head></head>の間に記述することは変わりありませんが、 <?php wp_head(); ?>というPHPコードがあると思うので、 <?php wp_head(); ?></head>間に以下のコードを記述します。
補足:大元のjQuery.jsが読み込まれていなくてスムーススクロールが動かない場合
function.phpに以下を記述
この記述によりjQury.jsの読込みをしてくれることと、他のプラグインが利用するjQueryとの共存をうまいことWordPressが調整してくれます。

▲ PAGE TOP

サンプルソース

DEMOのソースです。ご参考にどうぞ。

このコードをコピーして、HTMLファイルに貼付けても確認できます。

▲ PAGE TOP

補足1:位置調整

固定ヘッダーなどを利用している場合、目的のスクロール先が固定ヘッダーの下に隠れてしまうので、そのときは少し調整値をいれます(固定ヘッダーの高さを引きます)。

調整値を記述する場所は、 var position = target.offset().top;のところです。(17行目付近)下記コードを参照してください。

▲ PAGE TOP

補足2:ページ間でのスムーススクロール

補足1と関連して、外部ページの特定箇所でもスクロールさせたい場合は以下のコードを参照してください。

何故関連するかというと、固定ヘッダーを利用している場合は通常のアンカー指定では、やはり固定ヘッダーの下に目的のアンカーが隠れてしまうためです。

こちらでも、 var pos = tgt.offset().topの部分に補足1同様、調整値をいれています。

※アンカー先の指定は↑で紹介している記述とは違うのでご注意ください。

アンカー先の指定例

参照元:http://zxcvbnmnbvcxz.com/smoothscrol/

▲ PAGE TOP

カテゴリー:jQuery
タグ:

コメント

「jQuery とっても簡単、ページ内リンクでスムーズスクロール」への16件のコメント

  1. Pingback:追尾ヘッダーメニュー | コーダー技術ブログ

  2. 大変参考になります!
    有用な記事ありがとうございます。

    jQuery超初心者です。
    スムーズスクロールがタブパネルとバッティングしてしまうため、情報を探していました。

    素晴らしくシンプルなソースを拝見して、バッティングの問題を解消しようと考えてみました。

    スムーズスクロールの対象になるリンクにクラス(.scroll)を追加して
    スクリプトの '[href^=#]’ この部分を ’a.scroll’ に書き換えてみました。

    正常に動作するようですが、他の部分は書き換えずに使用してもスクリプトとして使用しても問題ないでしょうか?

    この問題ではタブにクラスを追加してスムーズスクロール側でタブに追加したクラスのフィルタを追加する方法がグーグルではヒットします。

    使用方法には賛否両論、一長一短あると思うのですが、対象のリンクのみスムーススクロール用のクラスを追加する方法をとりたいです。

  3. Pingback:Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと | 株式会社LIG

  4. Pingback:プラグイン無しでスムーズスクロール stinger3

  5. Pingback:jQueryでページ内スクロール | JavaScript Archives(ジャバスクリプト アーカイブス)

  6. Pingback:「jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法」を実装したときにスムーススクロールするボタンの設置方法のメモ

  7. Pingback:ページ内リンクをjQueryでスムーズスクロールした際のずれを解消する方法 | パソラボ

  8. とてもありがたい記事で、ページ内遷移として使わせていただいているのですが、
    ライセンスはどうなっていますでしょうか?

    商用で、可能なら使わせていただきたいです。
    urlをコメントアウトでつけておけば商用でも大丈夫でしょうか?

  9. ほんっと〜にありがとうございます!
    昨日からずっと取り組んでいたのですが、どれもちょっと基礎を分かっていないと分からない説明ばかりで、どこに書き込めばいいのかが分からずにいました。ここでようやく分かりました!本当に感謝です!

  10. JavaScriptの勉強を始めてまだ1週間程度の者です。
    使われているjQueryのセレクタで、いろいろ調べてみてもどうしてもわか
    らないものがあり、ご教示いただければ幸甚です。17行目の
    var target = $(href == “#” || href == “” ? ‘html’ : href)
    なのですが、移動先を取得するためのものとのことですが、$()の中は
    具体的にどのような意味のものなのでしょうか。条件式のように見えなく
    もないのですが、ifが使われているわけではなく、「苦悩」しています...。

      • さっそくのご教示、大変どうもありがとうございます!

        var target = $(href == “#” || href == “” ? ‘html’ : href)

        つまり、

        href == “#” || href == “”

        がtrueであれば $(‘html’)が変数targetに代入され
        falseであれば $(href)が変数targetに代入される

        15行目の処理(アンカーの値取得)により変数hrefは1, 2, 3, 4, 5, indexのいずれかのidなので、常にfalseになり、
        hrefが1である場合には、
        $(1)がtargetに代入される

        target.offset().topは
        $(1).offset().topになり、これ($(1)のtopの位置)が変数positionに代入され

        animate({scrollTop: position}, 400, “swing”)
        が実行される

        というふうに理解しました。自信はありません。何か変ですね...。

        • そんな感じでよいと思います。
          ご存知であれば申し訳ないですが、「console.log」や「alert」などを使って、各変数に何が入っていくのかを確認するとよいかもしれません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

FB Comment 試験中