読者です 読者をやめる 読者になる 読者になる

kwsktr's study log

kwsktr のおべんきょログ

jQuery 1.8 にしたら Chrome でアンカースクロールが動かない :: 1.7.2 では動くのになー

jQuery/Javascript

夏期休暇開けの初日ということで、職場でいろいろ思い出したり、スケジュール調整したりしてたら、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、operafirefox だと動くのも確認。
それなのに、Chrome だけが動いてくれません。
jQuery 1.7.2 では動いているのを確認しているだけにちょっと困ってます。


回避策はありそうというか、ボクの記述の仕方が悪い気もしていますが……解りませんでした。
仕方がないので、1.7.2 でいこうかと思います。


解決策をご存知の方がおりましたら、教えていただければ幸いです。

いまさら追記

セレクターの記述の仕方が悪かったのでした。

                $('html, body').animate({ scrollTop: position }, speed, 'swing');  // セレクターに body も追記

これで動くようになりました。