2014-01-31 勉強会の議事録です。
この日もいろいいろな事を学びました。その中の1つをまとめました。
jQueryのスムーススクロールってありますよね。ページ内リンクで、しゅるしゅる〜って移動するやつ。私がずっと前から使っていたものは、jQuery本体とトリガーのみで実装する簡単にできるやつでした。それを設置しているページに別の新しいjQueryを入れました。そしたら、それが動きません！jQuery本体のバージョンが古いのかなあ？と思い最新版にしました。jQuery本体1.5.1を1.10.2にバージョンアップしました。それで、新しいjQueryは動きましたが、今度はなんと！スムーススクロールが動きません。
そういう場合は、FireBugのコンソールでチェックです。先生にチェックの仕方を教わりましたが、こちらのサイトにもありますので、見て下さい。Firebugでできること: ソースコードのエラー解析
これで、エラーが出ていたらその箇所を修正すれば良いのです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//スムーススクロール $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000;// ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $($.browser.safari ? 'body' : 'html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
コンソールチェックで下から4行目の $.browser がエラーですよ！と出ていたので。それを直します。
先生のアドバイスで、下から4行目を下記のように書きかえました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//スムーススクロールzzzzzzzz $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 1000;// ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動先を取得 var target = $(href == "#" || href == "" ? 'html' : href); // 移動先を数値で取得 var position = target.offset().top; // スムーススクロール $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); }); |
これで直りました！やったー。
jQuery-1.9から「jQuery.browser」が完全にサポートされなくなっていたようです。jQuery $.browseで検索すると出て来ます。
jQueryがうまくいかないという事はよくあります。原因はさまざまですが、今回紹介したようにまずはエラーチェックをするのが良いでしょう。