CODEWITHSUNDEEP
jqueryhtml
ironmike
ironmike

Reputation: 143

Jquery scroll to top animate

Hi I know this question has been asked and answered a lot but even with that I can't seem to figure out where i'm going wrong. I'm trying to create a scrollTop animation using the "back to top" button at the end of the page but it doesn't seem to be working.

The code is as follows:

HTML

<h2 class="bottom-border extra-bottom-margin"><a href="#" class="go-to-top">Back to top</a></h2>.

JQUERY

<script>
$(function(){
$(".go-to-top").click(function(event){
    event.preventDefault();
    $("html, body").animate({"scrollTop": "0px"}, 100);
})
});
</script>

The URL is http://mike-griffin.com/about-me.html

Any help at all would be greatly appreciated. Thank you in advance!

Upvotes: 1

Views: 7220

Answers (2)

TheStatehz
TheStatehz

Reputation: 310

The scrollbar that is appearing belongs to your .container element, not the body.

Observe the behavior when you remove the css property:

overflow-x: hidden;

from the .container style.

Or to fix:

<script>

    $(".go-to-top").click(function(event){
        event.preventDefault();
        $(".container").animate({"scrollTop": "0px"}, 100);
    })

 </script>

Upvotes: 2

fstanis
fstanis

Reputation: 5534

The code you posted here should work, but that's not the code that you have on your website.

On the website you have this:

$(function(){
    $(".go-to-top").click(function(event){
        event.preventDefault();
        $("body").animate({"scrollTop": "0px"}, 1000);
    })
});

To make it work, change $("body") to $("html, body"). Reason for this is browser compatibility - some browsers apply the scroll position to document.documentElement (html) while others apply it to document.body (body).

Upvotes: 1

Related Questions