在页面加载时向下滚动

Question

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

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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.

Answer 6

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.