www.webdeveloper.com
Results 1 to 2 of 2

Thread: Scroll to center of the page

  1. #1
    Join Date
    Jan 2013
    Posts
    1

    Scroll to center of the page

    Hello, I'm using this code to move scroll to the horizontal center when entering website.
    It works well on Firefox. But if I press refresh on Safari or Chrome, scroll doesn't come back to the center.
    It stays on last move position.

    Maybe someone could help me?

    $(window).load(function scrollLeft() {
    scrollTo(($(document).width() - $(window).width()) / 2, 0);
    });

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    Opera,FF,IE,Chrome,Safari

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <style type="text/css">
    h1{width:5000px;text-align:center;display:block;}
    div{display:inline-block;width:200px;border:1px solid #000;text-align:center;}
    .transp{background-color:transparent;}
    .or{background-color:Darkorange;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    window.scrollTo(($(document).width()-$(window).width())/2,0);
    });
    </script>
    </head>
    <body>
    <h1>LEFT&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="or">CENTER</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;<div class="transp">&nbsp;</div>&nbsp;RIGHT</h1>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles