I need to scroll down about 50px when the page is loaded. This is what I'm using:

$(window).load(function(){
    $("html,body").scrollTop(55);
});

I've also tried:

scrollTo(0,55)

This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).

I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:

htttp://website#element

I need to scroll down about 50px when the page is loaded. This is what I'm using:

$(window).load(function(){
    $("html,body").scrollTop(55);
});

I've also tried:

scrollTo(0,55)

This works fine in Firefox and IE, however in Chrome, Safari and Opera it scrolls down to the proper position and then jumps back up to the top(or the last scroll position).

I've also tried using an element id to scroll down, but the browser still overwrites it. I tried like this:

htttp://website.com#element

• javascript
• jquery
• html

• Try to put your code inside the DOM ready function instead $(function(){ $("html,body").scrollTop(55); }); – Stphane Commented Oct 18, 2013 at 13:27
• Just tried it, still gets overwritten by the browser. – Kristiyan Kostadinov Commented Oct 18, 2013 at 13:31
• Do you have a hash in your url also ? – Dominic Green Commented Oct 18, 2013 at 13:34
• @f00bar The $(function(){}) construct in jQuery is just an alias for $(document).ready(function(){}), so it's the same thing. Both wait for the DOM ready event (among other complicated checks to deal with cross-browser inconsistencies). – Ken Bellows Commented Oct 18, 2013 at 13:35
• @kenbyes still there is code executed behind the scene that may be the reason why some browser do not behave the same way :/ Just supposing so – Stphane Commented Oct 18, 2013 at 13:38

6 Answers 6

I think your problem is that you are using $(window).load and some browsers are having problem as things havnt fully rendered yet. Try swapping to

$(document).ready(function(){
    $("html,body").scrollTop(55);
});

Seems to work fine in all browsers here http://jsfiddle.net/7jwRk/1/

Info

$(document).ready

executes when HTML-Document is loaded and DOM is ready

$(window).load

executes when complete page is fully loaded, including all frames, objects and images

<script type="text/javascript">
   $(document).ready(function(){
     var divLoc = $('#123').offset();
     $('html, body').animate({scrollTop: divLoc.top}, "slow");
 });
 </script>

Add id="123" to any <div> it will automatically scroll it down when page loads.

Here's an another script if the previous one wont work !

  <script>
 window.setInterval(function() {
 var elem = document.getElementById('fixed');
 elem.scrollTop = elem.scrollHeight;  }, 3000);
 </script>

Add id="fixed" to any <div> it will automatically scroll it down when page loads.

You can use the scrollIntoView() function. This is supported accross most browsers (even IE6).

document.getElementById('header').scrollIntoView()

After messing with scrollIntoView(), and observing it scroll correctly at page paint time, then snap to the top for no reason, I went with this:

http://website.com/#target

and

<a name="target">

Then the browser understands exactly what I need and does it. But I can only do this because we control the URI, so it naturally also won't work in all situations.

Alternatively, just fire this at the end of your body:

...
    <script type="text/javascript">
        $("html,body").scrollTop(55);
    </script>
</body>
</html>

If you are using 2 monitors, be sure that when you open the window of your browser with the page for which the script is implemented, you don't move that window to the other monitor, with a different screen resolution. Shortly: don't cross the windows of the browser to a different monitor, just open a new window of the browser for each monitor/ screen resolution.