img from: ぱくたそ

WordPressの話じゃないですすいません。
自サイトのテーマを作り直そうと思って、まずはとりあえず普通のページを作ってます。
で、タブメニューで二回目のハマリなので備忘録。

＜何がしたいか＞
jQueryを使ったタブメニューとスムーススクロールを、
同じ外部jsファイルに書いて動かしたい。

＜困った内容＞
動かない。
単独なら動くのでリンク先等は間違ってないし、コードがおかしいわけでもない。

関数がぶつかってる？いやそんなことは…ん？

あ、どっちもページ内アンカーリンクのクリックを合図に動く子だ！
そういえば前にもハマったんだった…早く思い出せよ自分。

どう対処したら分からないながらに、多分、

解決法１：「タグメニューとスムーススクロールとは別っこなんですよー」と書く

…ごめんなさいワタシにはどうにかできなかった（落ち込み）。

解決法２：タグメニュー以外のページ内リンクにしか飛ばないようにする

上記、アンカータグにクラス付与ってことは、
html5（アンカータグなし）ではどうすんだろう？　で試しに、

<section id="novels" class="scroll">
<h2>小説タイトル一覧だよ</h2>
（リスト…）
</section>

という形にしてみたんですが、スムーススクロール動かなかった。

2015.6修正
やだ恥ずかしい…。上記例でclass=”scroll”を追加すべきはリンク元のaタグの方でした。

<a href="#top" class="scroll">

これで「classがscrollのaタグをクリックしたときのみ、スムーススクロール作動」になります。

2015.6月 追記
1年経って、javaScriptにも少し慣れてきましたので追記。

「解決法2：タグメニュー以外のページ内リンクにしか飛ばないようにする」
上記例のように、リンク元aタグにクラスを追加するのも一手。
スクロールさせたくない対象が少ない場合は、除外するものを指定する手もあります。

スクロールさせたくないページ内リンク部分を.notで除外しよう。

$('a[href^=#]').not('#除外id a.除外クラス').click(function(){

除外したいものが二つあるときはスペース区切りでいけそうです。

＜まだ困っている＞
機能的には必須ではないスムーススクロールするだけなのに、
（いや、個人的にはするするっと動くのは必須だと思ってます、ページ内でパッと飛ばれると迷子になるので）
更に別のプラグインファイルを読み込むのはなんとなーく大袈裟なようで気が引ける。

だがしかし、自分で解決できない実力不足ゆえ致し方ない。なので。

＜解決策３＞
タブメニューの方に「ここはスムーススクロールしちゃだめよぅ」と言い聞かせることのできるプラグインを使用する。

を利用させていただきました（ただし2014年3月現在、jQuery1.6使用）。

…あ。
これ結局、前回ハマッた時と同じ解決策だ（なんという二度手間）。