jQuery よくあるスムーズスクロールを最強に使いやすくする

jQuery使うならだいたい入れているであろうスムーズスクロール。

たぶんノーマルではこんな感じで書いていると思います。

しかしこれだけではいろいろ困る。具体的に以下の場合。

  • href=”#”と書いたボタンをクリックしたら、戻りたくなくてもトップに戻ってしまう。
  • でも、トップに戻るボタンはhref=”#”と書きたい。
  • ヘッダーが追従するとき、ヘッダーで隠れちゃう

これらを全て解決できる、夢のようなスムーズスクロールを書きましょう。




実装

最終的に、以下のようになります。コピペで動くと思います。動かなかったら教えてください。。

ヘッダーが追従しない場合は、7行目を

こう書き換えてください。

解説

スクロールアニメーション自体を関数にしてしまいます。

発火部分の書き方に注目。

こうすることで、「基本的にhref=”#hoge”で動くけど、href=”#”だけのときは動かないよ」となっています。

href=”#”と書いたボタンをクリックしたら、戻りたくなくてもトップに戻ってしまう。

これが解決できました。

ただ、「href=”#”を押したら確かにスクロールしないけど、トップまで戻っちゃう」という場合、それはスムーズスクロールのせいというかブラウザの仕様なので、そんなときはhref=”#”を押して動かさないといけない処理の中に、

を入れてあげましょう。

例えば、ボタンをクリックしたら何か要素が出てくるという処理の場合、

こんな感じ。return false;を加えることで、処理がそこで終わるので、hrefの先に飛んじゃうのを防げるわけです。

さて次は、

ここで、「id=”pageTop”という要素をクリックしたら、トップまでスクロールするよ」と書いています。

でも、トップに戻るボタンはhref=”#”と書きたい。

これもクリアです。「トップへ戻る」ボタンには、id=”#pageTop”をつけてあげましょう。

いよいよ最後の難関です。

ヘッダーが追従するとき、ヘッダーで隠れちゃう

難関でもないんですが、

この部分でid=”header”の要素の高さをとり、

この部分で、スクロールさせる距離からheaderの高さを引いているだけです。

この部分、うまくheaderの高さをとれない場合は数値で自由に入力してもいいです。ヘッダーが追従しない場合は、0にすればOK。

おわり

これで、よくあるスムーズスクロールの悩みを一通り解決した夢のスムーズスクロールができました。

これからは、「あーまたこのパターンか…書き直さないと…」って言ってることもないですね!

ではでは、良いコーディングライフを!

告知

告知

twitterフォローしてね!