SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Retain scroll position on page reload

    Hi!

    I've tried several solutions for this and have gotten close but right now I'm stumped.

    Basically, I need to retain the existing scroll position on a page when it reloads but also to ignore any #anchors that are in the url.

    Could someone help me write this please?

    Many thanks
    Mike

  2. #2
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    reload means manual refresh or on event fired reload through coding ?

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, basically certain form changes reload the page.

  4. #4
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think this code will give idea to you.


    HTML Code:
    <head>
    <title>Untitled Document</title>
    <script>
    // function saves scroll position
    function fScroll(val)
    {
            var hidScroll = document.getElementById('hidScroll');
            hidScroll.value = val.scrollTop;
    }
    
    // function moves scroll position to saved value
    function fScrollMove(what)
    {
            var hidScroll = document.getElementById('hidScroll');
            document.getElementById(what).scrollTop = hidScroll.value;
    }
    </script>
    </head>
    
    <body  onload="fScrollMove('div_scroll');" onunload="document.forms(0).submit()";>
    <form>
    <input type="text" id="hidScroll" name="a"><br/>
    <div  id="div_scroll"  onscroll="fScroll(this);" 
    style="overflow:auto;height:100px;width:500px;">
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    .. VERY LONG TEXT GOES HERE
       
    </div>
    </form>
    
    </BODY>
    </HTML>

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to apply this code to the whole page as opposed to a container?

  6. #6
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    put the page contents under this div

  7. #7
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried that actually (I removed the overflow and height styles) but I don't think it's working. The figure on in the text field isn't altering when I scroll.

  8. #8
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    without overflow we couldnt track this scrolling position.

  9. #9
    SitePoint Addict goldensona's Avatar
    Join Date
    Jun 2011
    Posts
    226
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function getScrollXY() {
      var scrOfX = 0, scrOfY = 0;
      if( typeof( window.pageYOffset ) == 'number' ) {
        //Netscape compliant
        scrOfY = window.pageYOffset;
        scrOfX = window.pageXOffset;
      } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        //DOM compliant
        scrOfY = document.body.scrollTop;
        scrOfX = document.body.scrollLeft;
      } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        //IE6 standards compliant mode
        scrOfY = document.documentElement.scrollTop;
        scrOfX = document.documentElement.scrollLeft;
      }
      return [ scrOfX, scrOfY ];
    }
    </script>
    you can call the above function one before page reload and save it in cookie ,or use for input fields. after that using window.scrollTo function go to previous scroll position


Bookmarks

Posting Permissions

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