Scroll to when page load

Question

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...

score 22 · Accepted Answer · edited Jun 20 '12 at 05:00

22

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

edited Jun 20 '12 at 05:00

thecodeparadox

86,271
21
138
164

answered Jun 20 '12 at 03:49

lewiguez

3,813
1
25
40

Targeting the HTML tag and the body tag should work all right in Chrome. – lewiguez Jun 20 '12 at 03:57
thanks u. now how i can add speed or animation for this code? top.location.href = '#top'; – Alireza Jun 20 '12 at 04:04
You can't as far as I can guess. You are not setting a scalar property so it can't be animated. Basically, an animation is just a loop that increments a value. This is just setting a value to something that can't be incremented. Now, you can find the vertical position of the #top element and scrollTop to that vertical position. You'd do that by setting scrollTop in the animation code provided not to 0, but to the vertical position value. – lewiguez Jun 20 '12 at 04:08
1

By the way, to find vertical position, I believe you use something like $("#top").offset().top. Don't quote me on that, however. – lewiguez Jun 20 '12 at 04:13
2

I've been having an issue with Chrome 30 (Canary) where the scroll can't be set instantly. `$("html,body").scrollTop(0);` doesn't work, but this does: `$(window).load(function(){ $("html,body").animate({scrollTop: 0}, 1); });` – Andrew Jul 26 '13 at 15:52
@Andrew I could KISS you. This was driving me NUTS. What is up with Chrome's implementation of this?? As of Version 46.0.2490.86 (64-bit) scrollTop requires `$(window).load(function(){ ...` or it does JACK SQUAT. – cbmtrx Dec 07 '15 at 01:56
Thanks for this. But i want to reuse the above code after a button click and page load > target a ID to scroll at. I am currently trying like: `jQuery('.gform_next_button').click(function(){ jQuery('html head').scrollTop( jQuery('.gform_wrapper').offset().top ); }); jQuery('.gform_back_button').click(function(){ jQuery('html head').scrollTop( jQuery('.gform_wrapper').offset().top ); });` Am not getting this to work as shown in the experiment am trying with. [link](https://www.licensedagents.com.au/product/product-amarnath/) – Aroganz Jul 26 '18 at 09:47

score 0 · Answer 2 · answered Jun 20 '12 at 03:50

0

(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>

answered Jun 20 '12 at 03:50

cburyta

56
4

i need a aotomatic scroll after page loading. that code from first post is wroking, but not in chrome. i dont need a link anchor or somthing like this. i need scroll to anchor aotomatic after page load. i have it but my problem is google chrome! – Alireza Jun 20 '12 at 03:54
Ok, i put id="top" in body tag, now everything is working. now how i can add speed or animation for this code? top.location.href = '#top'; – Alireza Jun 20 '12 at 04:02

Scroll to when page load

2 Answers2