jQueryでページ内リンクをなめらかにスクロールさせられなかったのでWordPress側でなんとかする
（2013/05/28 追記あり）
この記事は旧テーマのときに対応できなかったときのもので、現行のテーマでは筆者のjQueryも ちこっとレベルアップしたのでjQueryだけで対応できるようになりました！よければそちらの記事も参考頂ければ幸いです
見出しを自動で目次化して クリックするとスムーズにスクロールさせる（スムーズスクロール編） | LogicA
（追記以上）
動かないスクロール
スムーズにスクロールさせるための方法に関しては いろいろな方法があり、jQueryのプラグインでも様々な素晴らしいプラグインがたくさんあります。
ですが、今回 当ブログではそれらが全く機能せず、どうやっても瞬間移動にしかなりませんでした。
結果的には現状、ちゃんと動いてます。動きました。動くまでを備忘録します。
まずjQueryプラグインで
今回試用させていただいたプラグインご提供者様方
コリスさん
to-Rさん
KAZUMiXさん
上記のプラグインを全て試させていただいたのですが、今回はどれもスクロールしませんでした。
注) 上記全てのプラグインは別で作成した実験用のコードであれば全てしっかりと動作しました。今回はこのブログの作りに原因があり、後述するjQueryでのスクロールアニメーションの相性が悪かったのが原因です。
しかし、今回試用させていただいたプラグインはどれもテーマに容易に組み込むことができるので、お手軽にリッチなアクションを加えたい時はオススメのものばかりです！普通のサイトならちゃんと動きますから！ウチだけです。動かないの。
直にjQueryを書いてみる
プラグインがどうしてもダメだったので、じゃあ直に書いたればええやん。と思って書きました。
参考サイト 1:nさん
[javascript]
$(function() {
$(‘a[href*=#]’).click(function() {
if (location.pathname.replace(/^//,”) == this.pathname.replace(/^//,”) && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length && target;
if (target.length) {
var sclpos = 30;
var scldurat = 1200;
var targetOffset = target.offset().top – sclpos;
$(‘html,body’)
.animate({scrollTop: targetOffset}, {duration: scldurat, easing: "easeOutExpo"});
return false;
}
}
});
});
[/javascript]
参考にして作成してみましたが、こちらでも全くウンともスンともせず．．．おぅふ．．．
やはりjQueryではどうにもならないようであります。
jQueryでダメならWordPress！プラグ・イン！！
もうここまで来たら動けばいい！WordPressのプラグインでやってみます！
WordPress › Smooth Scroll Links [SSL] « WordPress Plugins
これで．．．
動いた！ ｳﾜｧｧ—–｡ﾟ(ﾟ´Д｀ﾟ)ﾟ｡—–ﾝ!!!!
やってやりました！他力本願！！
おそらく、以前の記事 ➝ jQueryで記事の目次(ページ内リンク)を勝手に作ってくれるようにしました でやっているようなjQueryコードで目次を生成したり、他にもHTMLコードをjQueryで自動生成させたり隠したりさせているのが干渉しているのかな、と目星をつけてみたのですが、初級ｊクエリストの私では原因の特定までは至りませんでした。
でも動いたのでオゥケイです！！
ついでに ” トップへ戻る ” もアニメーション
実はこのブログのナビバー
ナビバーのなにもない部分はクリックするとそのページのトップへスクロールするようにしてます。このナビバーはスクロールしても常に画面の一番上に固定しています。
現状だとわかりづらい仕様になってるなぁ。と思います。もう少しわかりやすくて使いやすいデザインにしたいと思っていながら まだ手を付けてません．．．
ステキなアイデアが降りて来次第 早急に対応したいところです。
以上でした。
