jQuery 1.8 にしたら Chrome でアンカースクロールが動かない :: 1.7.2 では動くのになー
夏期休暇開けの初日ということで、職場でいろいろ思い出したり、スケジュール調整したりしてたら、jQuery のことをさっぱり忘れていました。
終業10分前にバージョンを入れ替えて、動作確認してたらアンカースクロールが動かなくなってました。
スクロールしないばかりか、アンカー先に遷移すらしてくれないのは、なんでだろ。
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <script src="jquery-1.8.0.js"></script> <script> $(function () { $('a[href^=#]').click(function () { var speed = 1000; var href = $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $('html').animate({ scrollTop: position }, speed, 'swing'); return false; }); }); </script> <style> #nya { width:500px; height:2000px; background-color:#ff6a00; } #wan { width:500px; background-color:#b6ff00; } </style> <title></title> </head> <body> <div id="nya"> <a href="#wan">nya</a> </div> <div id="wan"> <a href="#">wan</a> </div> </body> </html>
酷いサンプルですが……
こんなコードでも ie 10、opera、firefox だと動くのも確認。
それなのに、Chrome だけが動いてくれません。
jQuery 1.7.2 では動いているのを確認しているだけにちょっと困ってます。
回避策はありそうというか、ボクの記述の仕方が悪い気もしていますが……解りませんでした。
仕方がないので、1.7.2 でいこうかと思います。
解決策をご存知の方がおりましたら、教えていただければ幸いです。
いまさら追記
セレクターの記述の仕方が悪かったのでした。
$('html, body').animate({ scrollTop: position }, speed, 'swing'); // セレクターに body も追記
これで動くようになりました。