CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SimplyAzuma
SimplyAzuma

Reputation: 25594

scrollTo function working smoothly in JSfiddle but not smoothly on my page

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/

Upvotes: 1

Views: 633

Answers (1)

C3roe
C3roe

Reputation: 96226

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).

Upvotes: 4

Related Questions