javascript - スムーズスクロールページジャンプ

Question

助けが必要です。

JSFiddle で簡単なプロジェクトを作成しようとしましたが、うまくいきません。 http://jsfiddle.net/reUyp/2/

これがコードです

HTML:

<div id="img0">
    <b class="i01">ONE</b> <b class="i02">TWO</b>　<b class="i03">THREE</b>
</div>

<div style="width:200px; height:500px; background-color:red;" id="i01"></div>
<br>

<div style="width:200px; height:500px; background-color:blue;" id="i02"></div>
<br>

<div style="width:200px; height:500px; background-color:green;" id="i03"></div>
<br>

JavaScript:

$(function(){
    $('#img0 b').click(function(){
        CL=$(this).attr('class')
        st=$('#'+CL+'').offset().top;       
        $('body,html').animate({scrollTop: st}, 500);
        return false;
    });
});

私が望むのは、単語の 1 つをクリックすると、ページが対応する色付きの div にスクロールすることです。しかし、そうではありません...

私は何が欠けていますか？確かにバカバカしいな…。

ああ、実際にこれを達成するためのより良い方法はありますか?

Answer 1

jQuery を使用しているため、それを jsFiddle プロジェクトに含める必要があります。左上隅でそれを選択すると、サンプルが機能します。

また、独自のプロジェクトでは、jQuery を次のように含める必要があります。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

html ページの head 部分の内部。

Answer 2

これを見てください、これがあなたの正解です。

フィドルhere