scrollTo函数在JSfiddle中正常运行，但在我的页面上不平滑

Question

So, scrollTo() scrolls to the correct part of my page. That isn't the issue. It use appears there instantly. I was going to make a fiddle to show you the issue, but found out that it is working there. There is no "gradual" scrolling on my page as you can see in the following 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();
});

If you have any idea as to why this may be, feel free to point me in the right direction. I have also included my head tag information in that fiddle.

You can view the site I'm working on here: http://afrohorse.netau.net/test/

Answer 1

In your fiddle, the script code is embedded so that it gets executed on page load – whereas in your site, you execute it just where it is right there and then, and the elements you are targetting do not even exist by then, since they are further down the DOM tree (and so no event handlers get actually bound to anything).

Either make your code execute on page load as well (wrap it into $(function() { … }); ),
or move it further down after the elements in the DOM,
or use .on in the “live” way (see jQuery docs for that).