Question

更新2

我终于让代码工作了，但它只在同一页面内工作。我该怎么做才能让它从不同的页面工作？我在每个页面都有相同的链接，当第5页的访问者点击X链接时，它应该指向第2页的X锚点。

我使用了Marius P.的剧本，可以在下面找到。

Here's my test page

无论我尝试了多少，平滑的滚动脚本都不适合我。经过多次尝试，我试图制作一个jsfiddle，看看问题是否来自我的脚本没有加载。但不，不。即使在jsfiddle上我的代码也无效。它只是跳了

这是http://jsfiddle.net/8H2sn/2/

这是我从http://jsfiddle.net/YtJcL/

获取代码的地方

这是我的html只是为了满足stackoverflow

<div id="container">
<a class="scroll" href="#anchor1">go1</a>
<a class="scroll" href="#anchor2">go2</a>
<a class="scroll" href="#anchor3">go3</a>


<div id="anchor1"></div>
<div id="anchor2"></div>
<div id="anchor3"></div>
</div>

那是什么给出的？我应该修改脚本代码吗？我和将继续是一个js noob，所以我在这里很冷。任何提示都将不胜感激。

如果你说这是因为css，那么我就被王室搞砸了因为css必须留下来。

Answer 1

你没有在小提琴中加入 jQuery 。请参阅“框架和扩展”标题下的左上角

使用下拉列表添加最新的jQuery。

Answer 2

在加载html元素之前，您正在运行Javascript代码。让它在执行前等待文档准备就绪，方法是用以下内容包围它：

$(document).ready(function(e) {
    $(".scroll").click(function(event){
         event.preventDefault();
         //calculate destination place
         var dest=0;
         if($(this.hash).offset().top > $(document).height()-$(window).height()){
              dest=$(document).height()-$(window).height();
         }else{
              dest=$(this.hash).offset().top;
         }
         //go to destination
         $('html,body').animate({scrollTop:dest}, 1000,'swing');
     });
});

此外，根据您的链接类型，您可能会在代码中使用this.hash而不仅仅是this而遇到麻烦。

平滑滚动仅在同一页面上工作

2 个答案: