Question

Having some problems with the jQuery .animate functionality.

I have implemented a ‘Back to top’ link on my website here: http://www.unforgivengamers.com/

It is supposed to get you back to the top of the page once you click it.

Here is my jQuery code:

<script type="text/javascript">
jQuery.noConflict();
jQuery('a[href=#top]').click(function(){
        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
</script>

The problem: the animation is not smooth! I want it to scroll slowly, not instant.

Like this: http://designwoop.com/labs/smooth%20scroll/smooth-scroll.html

Am I missing something out here?

I’m using jQuery 1.8.3

Answer 1

You should put your code within document ready handler, the animation is not even performed on your page, the anchor is on the bottom of the page and your code without document ready on the top of the page.

jQuery(document).ready(function(){
    jQuery('a[href=#top]').click(function(){
        jQuery('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
})