CODEWITHSUNDEEP
javascripthtml
Yoan
Yoan

Reputation: 55

Unexplained jQuery bug with scroll animation

I have a small problem with a short jQuery script. I would like to create a simple scroll system, between 100% height section on my page.

I tried it, but there's a strange problem when using animate() jQuery function.

I've uploaded files on a server : http://www.fitnessmith.fr/test/

Try navigating through sections with links on right, and you'll see what I mean.

Here's the code used to create animations

$("nav#menu li a").on("click", function(e){
    e.preventDefault();
    var href = $(this).attr("href");
    $('html, body').animate({scrollTop:$(href).offset().top}, 600, 'easeInExpo');
});

Does anyone has an idea to solve it ? thanks for your help

Upvotes: 1

Views: 94

Answers (1)

Aintaer
Aintaer

Reputation: 2141

The problem is that you are applying overflow: hidden to both html and body elements. If you remove the overflow from your html,body rule, only the document body element will be overflow:hidden by virtue of your specific body rule.

The reason why this happened is that when you animated the scrollTop property of both html and body, due to neither having overflow and thus unable to truly scroll, what changed was the content of body relative to their offset parent.

You can see this in action if you called $('#about').offset() after clicking the link once. It reports a top position of 0! What has happened is that the "top" of your page has simply moved up in order to scroll the content to the viewport while maintaining no overflow. $('#home').offset() reports a large negative top at that point to indicate this.

By removing the html,body { overflow: hidden; } rule, you are allowing the content to be scrolled against a container while the more specific body { overflow: hidden; } rule hides the scrollbars.

Upvotes: 1

Related Questions