タイトルイメージ

外部ページでもスムーススクロールするプラグイン 2015.03.26

jQuery

はじめに

2015.5.10
サンプルページに外部サイトへのリンクを追加しました。

2015.5.6
スクリプトを一部修正しました。

前回の記事でつくったスムーススクロールのスクリプトをマイナーチェンジし、外部ページでもスムーススクロールするようにしてみました。
外部ページでもスクロール…、とはつまり、アンカーリンク付きの別ページを開いた時、遷移先のページでもスムーススクロールする、ということです。

サンプル

今回は、プラグイン化もしてみました。
まだ、改良の余地はたくさんあると思いますが、もし良かったら使ってください。

smoothScrollEx.js(右クリック→リンク先を保存)

INDEX

  1. 使い方
  2. 仕組み
  3. jQuery Easing Pluginを使う

使い方

jQueryを読み込み、その後にsmoothScrollEx.jsを読み込みます。
デフォルトならこれだけで準備OKです。

あとは、href属性がハッシュ(#)から始まるアンカーリンクをクリックすれば、その対となる(id=アンカー名)のついた要素へスムーススクロールで移動します。

 サンプル(上と同じ)

オプション

smoothScrollEx.jsを直接編集することで、スクロールスピードやディレイ速度を変更することができます。

編集できるのは以下の値です。

上から順に見ていきますと、

scrollSpeed スクロールする速さ。ミリ秒で指定。
easing ‘swing’,’linear’のどちらか。Easing Plugin使用可。
adjustment 移動完了時、アンカー先のTopがそのままwindowTopになるのでデフォルトで-100にしている。
ぴったりにしたい場合は0にする。
delayTime 別ページに移動した瞬間から、アニメーションスタートまでの時間。
すぐにアニメーションさせたい場合は0にする。

となります。

仕組み

スムーススクロール自体の仕組みはとても簡単です。
別記事でも紹介しましたが、href属性が#アンカー名から始まる属性をクリック→id=アンカー名の位置を取得し、windowがそこまでアニメーション、という流れです。

しかし、別ページに遷移する時も同じ動作をさせようとすると、すこし複雑になってきます。
ポイントは、href=”別ページ.html#アンカー名”というリンクをクリックした時の動作をいかにしてなくすか、ということだと思います。

smoothScrollExでは、要素をクリックした時に、href=”別ページ.html#アンカー名”を、href=”別ページ.html?id=アンカー名”と置き換えることで、それを可能にしています。

私が参考にしたスクリプトでは、あらかじめhref属性の”#”を”?=id”に変えておくという方法をとっていました。
参考:jQuery 外部ページでもスムーズスクロールを実装する方法
その方法だと、とても簡単に実現できるのですが、事前にHTMLをいじる必要がある点が少し面倒だと感じたので、クリックした時に自動で変換するようにしてみました。

ただ、href属性の”#”をすべて”?id=”に変えてしまうと、ページ内リンクや、別ホストのページにジャンプした時もアンカーリンクが機能しない、という問題点があります。
その問題点を解消するために、href属性の中身をチェックする関数を用意しました。

またif文で分岐させることによって、”#アンカー名”や”別ホスト.com/page.html#アンカー名”といったhref属性の”#”は、クリックしても変換されません。
これらの関数や条件分岐は、すべて検証したわけではないので、もしかすると漏れがあるかもしれません。
ここが今後の改良点だと思います。

より細かな点は以下に示します。

jQuery Easing Pluginを使う

jQuery Easing Pluginをダウンロードし、smoothScrollEx.jsより前に読み込むことで、簡単にeasingを増やすことができます。

jQuery Easing Plugin

オプションを’swing’→’任意のeasing’へ変更。

 サンプル

追記

追記その1

このプラグインは、ローカル上では上手く動作しないことがあります。
特に、外部サイトへのアンカーリンクの場合、ローカル上では’#アンカー名’を’?id=アンカー名’に変更してしまいます。
そのため、リンク先ページのURLを見ると、スムーススクロールしないのに「○○.com/○○.html?idアンカー名」となります。

これは条件分岐部分に起因します。
条件分岐はかなり複雑です。
これは、私の努力不足によるもので、改善点は多くあると思います。
全パターンを思いつければいいのですが、頭が悪いので、おそらく漏れがあると思います。
漏れにはその都度対応していきたいと思います。

追記その2

コメントを受けて、遷移後のページのURLが「○○.com/○○.html?id=アンカー名」にならないようにするには、どうすればいいか、と色々考えました。
結論を言えば、スクリプトを追加して、オプションの’adjustment’を’0’にすれば可能です。

サンプル

smoothScrollEx_b.js

上のサンプルでは、別ページへのアンカーリンクをクリックすると、遷移してスムーススクロールした後、URLの’?id=アンカー名’が’#アンカー名’に変化します。

adjustmentを0に、というのは、URLが変化した時点で、ブラウザ側の動作が始まってしまい、adujustmentの値分移動してしまうからです。

なお、上記の理由から、’#アンカー名’自体を消してしまうということは困難です。
消してしまうと、消えた時点でブラウザの動作がスタートして、windowのscrollTopが0(つまりページTop)になってしまいます。

ブラウザの動作を無効化するスクリプトがあれば可能かもしれませんが、現時点で私には無理ですね。
今後の課題とします。

Thanks for reading to the end!!

コメント (9件)

  1. 別ページでも”?id=アンカー名”を非表示にするにはどうしたらいいでしょうか?

    • コメントありがとうございます。

      「別ページ」とは、外部サイトということでしょうか?
      外部サイトのアンカーリンクの場合→
      最新のver1.1では、外部サイトのアンカーリンクの場合、「#id」は変更されずそのままです。
      移動先ページのURLは、「○○.com/○○.html/#アンカー名」となります。

      (サンプルページに新たに外部サイトへのリンクを追加しました)
      サンプル
      もちろん、移動先にはjsファイルがないので、スムーズスクロールはしません。

      同サイト上でのページ移動で、リンク先ページurlの「?id=アンカー名」を非表示にしたいという場合→
      現状の私の技術レベルでは困難です。
      (ページ移動後にurlを書き換えると、ブラウザの動作が始まってしまうので、挙動がおかしくなってしまいます。これに関しては記事内で追記します。)

      • 早速のご回答ありがとうございます。
        私が希望したのは、後者です。

        >同サイト上でのページ移動で、リンク先ページurlの「?id=アンカー名」を非表示にしたいという場合

        ページ内では、アンカー名が表示されていなかったので、ページ移動でも同様にならないかなと思いお聞きしました。

        ご丁寧にご説明下さりありがとうございました。
        現状でも素晴らしいjsなのに変な希望をしてしまいました。すみません。
        ありがたく使用させていただきます。

  2. 同じページ内の移動は、毎回ページTOP からの移動ではなく、クリックした位置からの移動は可能でしょうか?

  3. ローカルでは正常に動作しますが、サーバーにアップした場合、同サイトの別ページに移動した時に、1回目はスクロールしません。2回目からは正常にスクロールします。最新のIE、Google Chrome、Edgeで試してみました。
    下記ウェブサイトのHOMEの左上の「更新」をクリックし、次に「Tips」をクリックしてみて下さい。

  4. 本日確認したところ、2回目以降もスクロールしません。
    メインメニューから移動先のページを一旦表示させた後は正常にスクロールします。
    移動先のページのプラグインが読み込まれないからでしょうか。
    よろしくお願い致します。

  5. うまくいきました!ありがとうございます。
    このページにたどり着く前に、変なサイトに邪魔されてなんぎしました。
    けど、助かりました。

  6. こちらのページを拝見して利用させていただきました。
    有難う御座います。

    概ねちゃんと動作しますが、1点だけ質問があります。
    1回目はページ外でもスムーズスクロールしてidの位置に移動するのですが、いったん元のページに戻りもう一度の同じidリンクをクリックするとURLの最後に?id=undefinedがついてページ移動しません。

    これを直すにはどうしたらいいのでしょうか。
    宜しくお願い致します。

コメントを残す

メールアドレスが公開されることはありません。コメントのみの投稿も可能です。

TOPページへ戻る

About

Creator Indexは、Webクリエーター初心者に役立つブログを目指しています。
執筆者自身が日々学んだ内容をアップしていきます。

Author

筆者イメージ

Jun

サイトリニューアルを計画中…