jQueryでページ内リンクをなめらかにスクロールさせられなかったのでWordPress側でなんとかする

origin_2496109349-2.jpg

こんにちは! 4連休からの出勤初日を終えた @dutchisover です!

Origin 2496109349 2

(2013/05/28 追記あり)
この記事は旧テーマのときに対応できなかったときのもので、現行のテーマでは筆者のjQueryも ちこっとレベルアップしたのでjQueryだけで対応できるようになりました!よければそちらの記事も参考頂ければ幸いです
見出しを自動で目次化して クリックするとスムーズにスクロールさせる(スムーズスクロール編) | LogicA
(追記以上)

動かないスクロール

スムーズにスクロールさせるための方法に関しては いろいろな方法があり、jQueryのプラグインでも様々な素晴らしいプラグインがたくさんあります。

ですが、今回 当ブログではそれらが全く機能せず、どうやっても瞬間移動にしかなりませんでした。
結果的には現状、ちゃんと動いてます。動きました。動くまでを備忘録します。

まずjQueryプラグインで

今回試用させていただいたプラグインご提供者様方

コリスさん

to-Rさん

KAZUMiXさん

上記のプラグインを全て試させていただいたのですが、今回はどれもスクロールしませんでした。

注) 上記全てのプラグインは別で作成した実験用のコードであれば全てしっかりと動作しました。今回はこのブログの作りに原因があり、後述するjQueryでのスクロールアニメーションの相性が悪かったのが原因です。

しかし、今回試用させていただいたプラグインはどれもテーマに容易に組み込むことができるので、お手軽にリッチなアクションを加えたい時はオススメのものばかりです!普通のサイトならちゃんと動きますから!ウチだけです。動かないの。

直にjQueryを書いてみる

プラグインがどうしてもダメだったので、じゃあ直に書いたればええやん。と思って書きました。

参考サイト 1:nさん

参考にして作成してみましたが、こちらでも全くウンともスンともせず...おぅふ...
やはりjQueryではどうにもならないようであります。

jQueryでダメならWordPress!プラグ・イン!!

もうここまで来たら動けばいい!WordPressのプラグインでやってみます!

WordPress › Smooth Scroll Links [SSL] « WordPress Plugins

これで...

動いた! ウワァァ—–。゚(゚´Д`゚)゚。—–ン!!!!

やってやりました!他力本願!!

おそらく、以前の記事 ➝ jQueryで記事の目次(ページ内リンク)を勝手に作ってくれるようにしました でやっているようなjQueryコードで目次を生成したり、他にもHTMLコードをjQueryで自動生成させたり隠したりさせているのが干渉しているのかな、と目星をつけてみたのですが、初級jクエリストの私では原因の特定までは至りませんでした。

でも動いたのでオゥケイです!!

ついでに ” トップへ戻る ” もアニメーション

実はこのブログのナビバー
JQueryで記事の目次 ページ内リンク を勝手に作ってくれるようにしました | LogicA 1

ナビバーのなにもない部分はクリックするとそのページのトップへスクロールするようにしてます。このナビバーはスクロールしても常に画面の一番上に固定しています。

現状だとわかりづらい仕様になってるなぁ。と思います。もう少しわかりやすくて使いやすいデザインにしたいと思っていながら まだ手を付けてません...
ステキなアイデアが降りて来次第 早急に対応したいところです。

以上でした。

最近の記事

Sponsored