平滑滚动页面跳转

Smooth scrolling page jump

本文关键字：滚动 平滑      更新时间：2023-09-26

我需要一些帮助。

我试图在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。但它没有...

我错过了什么？我敢肯定这是一件非常愚蠢的事情...

哦，真的有更好的方法来实现这一目标吗？

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

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

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

在 HTML 页面的头部。

您正在尝试使用 jQuery 语法，但尚未在Frameworks & Extensions侧边栏中加载 jQuery。选择"jQuery 1.9.1"，代码工作正常。

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

小提琴here

相关文章：