javascript - scrollTo 函数在 JSfiddle 中运行流畅但在我的页面上运行不流畅

Question

因此，scrollTo() 滚动到我页面的正确部分。那不是问题所在。它使用立即出现在那里。我打算制作一个 fiddle 来向您展示这个问题，但发现它在那里工作。正如您在以下 JSFiddle 中所见，我的页面上没有“渐进”滚动。

http://jsfiddle.net/8xK8x/1/

$('.scrollto').click(function(e) {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("#main").animate({ scrollTop: parseInt($("#main").scrollTop() + destination)} );
   e.preventDefault();
});

如果您知道为什么会这样，请随时为我指明正确的方向。我还在那个 fiddle 中包含了我的头标签信息。

您可以在此处查看我正在处理的网站:http://afrohorse.netau.net/test/

Answer 1

在您的 fiddle 中，脚本代码被嵌入，以便它在页面加载时执行——而在您的站点中，您只是在它所在的位置执行它，然后您定位的元素甚至不存在，因为它们位于 DOM 树的更下方(因此没有事件处理程序实际绑定(bind)到任何东西)。

也可以让您的代码在页面加载时执行(将其包装到 $(function() { … });)，
或者将它进一步向下移动到 DOM 中的元素之后，
或以“实时”方式使用 .on(请参阅 jQuery 文档)。