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

smooth scroll only working on the same page

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

UPDATE 2

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

我使用了Marius p。

这是我的测试页面

无论我多么努力，流畅的滚动脚本都不适合我。经过多次尝试，我试图做一个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新手，所以我在这里很受冷落。如有任何提示，不胜感激。

如果你说这是因为css，那么我就完蛋了，因为css必须留下

您还没有在jQuery中包含jQuery。见左上角标题"框架和扩展"

使用下拉菜单添加最新的jQuery

您的Javascript代码正在加载html元素之前运行。让它在执行之前等待文档准备好，在它周围加上以下内容:

$(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可能会遇到麻烦。

相关文章：