CODEWITHSUNDEEP
jquerygoogle-chromescrollto
Ali
Ali

Reputation: 1058

Scroll to when page load

i got a jquery code from this link (end of page): How to scroll to top of page with JavaScript/jQuery?

Why don't you just use some reference element at the very beginning of your html file, like

<div id="top"></div>

and then, when the page loads, simply do

$(document).ready(function(){

    top.location.href = '#top';

});

If the browser scrolls after this function fires, you simply do

$(window).load(function(){

    top.location.href = '#top';

});

now, everything is working but not in google chrome! how i can fix this code for google chrome? and how i can add a some animation to this code? like scroll speed or fast, slow etc...

Upvotes: 11

Views: 45973

Answers (2)

lewiguez
lewiguez

Reputation: 3823

If you're using jQuery, you can use scrollTop to scroll. It's a method, but it can be animated too. Here is the documentation: jQuery API Documentation for scrollTop

You can use it like so:

$("html,body").scrollTop(0);

Or for animating:

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

You could set this in any event handler:

$(document).ready(function()
{
     $("html,body").animate({scrollTop: 0}, 1000);
}

Or:

$(window).load(function()
{
     $("html,body").animate({scrollTop: 0}, 1000);
}

Upvotes: 22

cburyta
cburyta

Reputation: 56

(I'd recommend the answer lewiguez gave in practice, but still not sure why your method didn't work in google chrome.)

That seems to be working for me, I'm not sure about the window load though. I tested the actual "top.location.href" line though on click of a link.

$('#bottomlink').click(function(){
  top.location.href="#top";
  return false;
});

This is near the top of the page.

<p id="top">lorem ipsum</p>

And this is the link at the bottom of the page.

<a id="bottomlink" href="#">Bottom Link</a>

Upvotes: 0

Related Questions