CODEWITHSUNDEEP
javascriptjquery
rob.m
rob.m

Reputation: 10571

scrollTo not scrolling the window

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.

Upvotes: 5

Views: 4770

Answers (4)

Ivan Makarevych
Ivan Makarevych

Reputation: 1

Try this:

html, body {}

your_element {
  height: calc(100vh);
}

Upvotes: 0

rob.m
rob.m

Reputation: 10571

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

Upvotes: 2

Oscar Jara
Oscar Jara

Reputation: 14187

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 comment 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 compatibility and then attach the animate function. I'll recommend you to do some research about how to scrollTop crossbrowser.

Another recommendation (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.net/oscarj24/n7Buw/2/

Upvotes: 1

redolent
redolent

Reputation: 4259

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

Upvotes: 0

Related Questions