I am not sure why this isn't working

html

    <a href="#" id="scrollTop" class="margin-top-40 btn btn-danger btn-lg top btn-not-100">Back to top</a>

jQuery

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $(window).animate({scrollTop: 0}, 'slow');
    });

Even tried the following with still negative results

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $("body, html").animate({scrollTop: 0}, 'slow');
    });

Css

    html, body {height:100%;}

Using jquery-1.10.2.js, consolle not giving any error

UPDATE Comments below lead me to understand the issue is with using jQuery scrollTop and html, body set to overflow... Because of that a new question has been created here on stack.

I am not sure why this isn't working

html

    <a href="#" id="scrollTop" class="margin-top-40 btn btn-danger btn-lg top btn-not-100">Back to top</a>

jQuery

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $(window).animate({scrollTop: 0}, 'slow');
    });

Even tried the following with still negative results

    $("#scrollTop").on("click",function(e){
      e.preventDefault();
      $("body, html").animate({scrollTop: 0}, 'slow');
    });

Css

    html, body {height:100%;}

Using jquery-1.10.2.js, consolle not giving any error

UPDATE Comments below lead me to understand the issue is with using jQuery scrollTop and html, body set to overflow... Because of that a new question has been created here on stack.

• javascript
• jquery

• Are you sure that the javascript is being loaded AFTER the html markup? – Felipe Miosso Commented Jan 14, 2014 at 19:15
• @dontvotemedown - it is valid (maybe not css).That should work. I use $('html, body').animate({scrollTop: $('#elem').offset().top + 'px'}, 500); regularly – Kai Qing Commented Jan 14, 2014 at 19:15
• @FelipeMiosso yes, all other js is working fine – rob.m Commented Jan 14, 2014 at 19:16
• @jtheman nope, no difference at al – rob.m Commented Jan 14, 2014 at 19:19
• 1 Maybe you have body { height: 100%; } in your CSS – Daiwei Commented Jan 14, 2014 at 19:31

4 Answers 4

Got the issue, thanks to ments I noticed I had body: overflow-x:hidden which means scrollTop isn't working when we are using overflow on body, html

Well, your first code snippet won't work because window doesn't have a scrollTop property that body has (that explains why your second code snippet it is supposed to work fine - you can do console.log($(window)) and check it's properties just to make sure).

However, you can do $(window).animate(..) and you won't see any error at browser console because the object supports it. The problem is when trying to specify the scrollTop argument to the animation which is not supported by the affected element and it won't work as expected (just ment the e.preventDefault() line from your second code snippet and see what happens - It is stopping script execution when testing and I really don't know why you are using that line).

By the way, I also don't know why you said that your second code snippet is not working (maybe it depends on the browser you are using, at least it works using Chrome). So, as far as I remember, there were some problems when using just body or html tag(s) in the jQuery selector for scrollTop but you can try this one $('body,html,document') for better patibility and then attach the animate function. I'll remend you to do some research about how to scrollTop crossbrowser.

Another remendation (if your second code snippet stills not working fine for you) could be to check if your DOM was already loaded, maybe you can try using your code at onDomReady which means to put it inside $(function(){ .. }); or $(document).ready(..).

Live Demo: http://jsfiddle/oscarj24/n7Buw/2/

This line of code worked for me on my site:

$("body, html").animate({scrollTop: 0}, 'slow');

So it must be the calling code. Perhaps you have duplicate id's. Type this in the console:

alert( $('*#scrollTop').size() );

Or you could use multiple selectors:

function myScrollTop( e )
{
    e.preventDefault();
    $("body, html").animate({scrollTop: 0}, 'slow');
}

// Map to future elements
$('body').on( 'click', '#scrollTop', myScrollTop );

// Get all elements with id if there are multiple
$('*#scrollTop').click( myScrollTop );
 

Try this:

html, body {}

your_element {
  height: calc(100vh);
}