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;
    });
});

我想要的是，当您单击其中一个单词时，页面应滚动到相应的彩色div。但它没有......

我错过了什么？我确定这是一个非常愚蠢的事情......

哦，实际上有更好的方法吗？

Answer 1

由于您使用的是jQuery，因此必须将其包含在jsFiddle项目中。在左上角选择它，您的样本将起作用。

同样在您自己的项目中，您必须包含jQuery，例如：

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

在html页面的头部。

Answer 2

您正在尝试使用jQuery语法，但尚未在Frameworks & Extensions侧边栏中加载jQuery。选择jQuery 1.9.1，您的代码就可以了。

Answer 3

看到这个，这是你的正确答案。

小提琴here

平滑滚动页面跳转

3 个答案: