タブ切り替え+スムーズスクロールをバッティングせずに実装する方法

タブ切り替え+スムーズスクロールをバッティングせずに実装する方法

ちょっと前に、フッターの記事メニューをタブ切り替えにしたんですが、どうしてもスムーズスクロールとは相性が悪いらしく。しょうがないのでページ内リンク(目次から該当の位置へのスムージング)は諦めて、トップに戻るのだけ手書きしてました。が、解決しました!嬉しい!ヽ(゚∀゚)ノ


どうでもいいけどこのアイキャッチつくるのに無駄に時間かかったよ!何やってんだ_(:3 」∠)_

コリスさん作のjQuery

このjQueryのすごいところは、動作しないエリアを設定することができるんです!しかもclass="nopscr"というクラスを与えるだけという超お手軽。

最新バージョンでは商用利用も無料とのことですので、ご使用の際はライセンスをご確認ください。

実装

スクリプトをダウンロードして、読み込むだけ!

ふつうのhtml

<script type="text/javascript" src="/js/jquery.page-scroller.js" charset="utf-8"></script>

WordPress

<?php wp_enqueue_script('page-scroller', get_bloginfo('template_url') . '/js/jquery.page-scroller.js'); ?>

ディレクトリは各自調整ください。

タブ切り替え部分は動作させない

<a href="#tab1" class="nopscr">タブ部分</a>

該当部分にclass="nopscr"を加えます。これだけでOK!かんたん!タブについての詳しい実装方法はこちらの記事をご覧ください。

しばらくモヤモヤしてたのが解決しました!コリスさんありがとうございました♡

公開日:2012/06/22
更新日:2014/05/07

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。