jQueryでページ内スムーズスクロールを実装する確実な方法と注意点

Sponsored Link


jQuery を使ってページ内の「アンカーリンク」(#~)をスムーズにスクロールするやり方はたくさん紹介されています。

その多くに実装の違いはありませんが、一部問題があることがあります。
例えば、以下のように記述されることが多いのですが、これだとaタグの「href」属性に”#”のみ書かれている場合は、それを利用している他のスクリプトと衝突することがあります。

// ページ内スムーズスクロール
//==================================================
jQuery("a[href^=#]").click(function() { /*(1)*/
    var myHref= jQuery(this).attr("href");
    var myPos = jQuery(myHref).offset().top;
    jQuery("html,body").animate({scrollTop : myPos}, 4000, 'swing');
    return false; /*(2)*/
});
/*
(1)指定した値が属性の値と前方一致する要素を選択
(2)本来のリンクはOFF(URLにアンカー名は表示されません)
*/

この場合、jQueryの属性セレクタに「”a[href^=#]”」と記述されていますので、「#で始まる」という意味になります。

HTMLのリンク先が「href=”#1″」となっていても動作しますが、「href=”#”」でも動作してしまいます。

「href=”#”」はリンク無しの意味でその他のスクリプトでも使われていることがあるため、上記のセレクタで一致してしまい、(2)の「return false;」が動作して、その他のスクリプトが機能しなくなることも想定されます。

そこで以下のように書き換えます。

// ページ内スムーズスクロール
//==================================================
/*jQuery("a[href^=#]").click(function() { /*(1)*/
jQuery("a[href^=#][href!=#]").click(function() { /*(2)*/
    var myHref= jQuery(this).attr("href");
    var myPos = jQuery(myHref).offset().top;
    jQuery("html,body").animate({scrollTop : myPos}, 4000, 'swing');
    return false; /*(3)*/
});
/*
(1)指定した値が属性の値と前方一致する要素を選択
(2)#が前方一致し、かつ#をもたない(単語として持たないの意)=>'#'だけの場合は機能させたくない為
(3)本来のリンクはOFF(URLにアンカー名は表示されません)
*/

古い記述はコメントアウトで残しました。*(1)

ここで新しく追加されたのは(2)です。
この場合、jQueryの属性セレクタが繋がって記述されていますので、and条件として処理されます。

a[href^=#][href!=#] ← これです

これは「#が前方一致し、かつ#を持たない」という相反する条件なのですが、後者の「#を持たない」は「単語として持たない」という意味なので、「href=”#”」ではないという意味になります。

ちなみに、「href=”#”」をセレクトしたい場合は「~」(チルダ)を使います。

jQuery("a[href~=#]").click(function() {}

チルダは「単語として持つ」という意味です。
こうすることで「#」だけが書かれたhref属性を持つaタグをセレクトできるのです。

「#」だけが書かれたhrefは、「ページTOPに戻る」というリンクでも利用されます。
上記のスクリプトだと、そういう使い方はできないので、bodyにもidを付けておくと良いでしょう。

なお、jQueryの「$」ではなく「jQuery」を用いているのは、Wordpressで利用した時にコンフリクトして動作しない場合への対応です。

こういった動作は見た目も良いので使いたくなるのですが、通常は「~.html#1」などと表示されるURL欄のアンカーリンクが表示されなくなります

アンカーリンクもブックマークしてもらいたい場合は使わないという選択も必要になってきます。

HTMLとCSSの例


HTML

<!--
    Page-top start
=========================================================== -->
<div id="pagetop" class="pie">
<a href="#top">TOP</a>
</div>

CSS

/*
 * Page-top styles: basic defaults
 */
#pagetop {
    position: fixed;
    right: 20px;
    bottom: 40px;
    background-color: #FFFFFF; /*divに角丸をつけるので、こっちに配色*/
    display: none;
    border-width: 5px;
    border-style: solid;
    border-top-color: #F4AF4E;
    border-right-color: #DD6D66;
    border-bottom-color: #4188F0;
    border-left-color: #3EBF4D;
    border-radius: 50%!important;

}
#pagetop a {
    display: block; /*widthを効かせる為、インラインの上下paddingがボックスからはみ出る為*/
    width: 50px;
    padding: 10px 0;
    text-align: center;
    text-decoration: none; /*今回は不要*/
    border-bottom: none;
    color: #444444; /*デフォルトを上書きしたいのでdivではなく、ここで指定*/
}
Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。