www.webdeveloper.com
Results 1 to 8 of 8

Thread: How to save page scrollbar position on page refresh?

  1. #1
    Join Date
    Apr 2012
    Posts
    9

    How to save page scrollbar position on page refresh?

    Hi everybody..
    I have been looking for a code to retain page position when a link is clicked, I have a website programmed with PHP and has many dynamic and static links.

    I fond a javascript code that retains page scroll position, but this code doesn't work unless I remove this line from the page code:

    HTML Code:
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 2.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    So I searched online to find out why doe's the line above prevents the javascript code from doing what it suppose to do, then I found that this javascript code contains syntax error and/or + (px) that refers to pixels (or such thing) is missing where it should be.

    Here is the javascript code embedded in html document just for a quick test:

    HTML Code:
    <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 2.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <style type="text/css">
    #container{
        width:400px;
    }
    #main{
        width:300px;
        float:right;
    }
    </style>
    
    <script type="text/javascript"><!-- This javascript code retains page scroll bar in it's position on page refresh-->
    
    cookieName="page_scroll"
    expdays=365
    
    function setCookie(name, value, expires, path, domain, secure){
    if (!expires){expires = new Date()}
    document.cookie = name + "=" + escape(value) + 
    ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    ((secure == null) ? "" : "; secure")
    }
    
    function getCookie(name) {
    var arg = name + "="
    var alen = arg.length
    var clen = document.cookie.length
    var i = 0
    while (i < clen) {
    var j = i + alen
    if (document.cookie.substring(i, j) == arg){
    return getCookieVal(j)
    }
    i = document.cookie.indexOf(" ", i) + 1
    if (i == 0) break
    }
    return null
    }
    
    function getCookieVal(offset){
    var endstr = document.cookie.indexOf (";", offset)
    if (endstr == -1)
    endstr = document.cookie.length
    return unescape(document.cookie.substring(offset, endstr))
    }
    
    function deleteCookie(name,path,domain){
    document.cookie = name + "=" +
    ((path == null) ? "" : "; path=" + path) +
    ((domain == null) ? "" : "; domain=" + domain) +
    "; expires=Thu, 01-Jan-00 00:00:01 GMT"
    }
    
    function saveScroll(){ // added function
    var expdate = new Date ()
    expdate.setTime (expdate.getTime() + (expdays*24*60*60*1000)); // expiry date
    
    var x = (document.pageXOffset?document.pageXOffset:document.body.scrollLeft)
    var y = (document.pageYOffset?document.pageYOffset:document.body.scrollTop)
    Data=x + "_" + y
    setCookie(cookieName,Data,expdate)
    }
    
    function loadScroll(){ // added function
    inf=getCookie(cookieName)
    if(!inf){return}
    var ar = inf.split("_")
    if(ar.length == 2){
    window.scrollTo(parseInt(ar[0]), parseInt(ar[1]))
    }
    }
    
    </script>
    </head>
    
    <body onload="loadScroll()" onunload="saveScroll()" >
    
    <h1>A tetsing link is at the bottom of this page</h1>
    <div id="container" style="height:1600px;background-color:#b64100">
        <div id="main" style="margin-top:1550px">
    		<a href="" style="Color:#ffffff; font-size:18px;">Test</a>
        </div>
    </div>
    </body>
    </html>
    Can any body fix these errors and add what ever is missing to this code to make it completely and valid?

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    replace
    Code:
    var x = (document.pageXOffset?document.pageXOffset:document.body.scrollLeft)
    var y = (document.pageYOffset?document.pageYOffset:document.body.scrollTop)
    with
    Code:
    var x =(window.pageXOffset)?window.pageXOffset:document.body.scrollLeft;
    var y =(window.pageYOffset)?window.pageYOffset:document.body.scrollTop;
    and btw it's a good habit to put semicolons at the end of the code lines
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Apr 2012
    Posts
    9
    Thanks Padonak it worked by replacing those lines, I just started to learn PHP and Javascript basics, so thanks again for your help.

    I think it's good for everyone if there are other solutions to stop page jumping to top to be mentioned here so every one benefits by them.

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    another solution would be making an interactive site interface with JQuery or something else to minimize page surfing but of course this depends on many reasons..
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  5. #5
    Join Date
    Apr 2012
    Posts
    9
    I was supposing that there is a simple perfect solution for that purpose, I mean a cross browser and easy for everyone to apply, you know some browsers do not support javascript even.

    Having a page that jumps to top on every link click is annoying for visitors and they will run away before that drives them crazy.

    I think pages jump to top when reloaded is like a bug that everyone who builds a website will search for a solution for it, and I think it shouldn't be there by default in the first place.

  6. #6
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,633
    usually the users do not need to reload pages again and again - what for should they do that?
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  7. #7
    Join Date
    Apr 2012
    Posts
    9
    I don't mean they will refresh on purpose by clicking on the browser refresh button, I mean by clicking on the links (dynamic and static) on the page.
    Pages get reloaded on every link click! even when submitting a form or any kind of link!
    Last edited by CodingLearner; 04-02-2012 at 11:20 AM.

  8. #8
    Join Date
    Jul 2012
    Location
    Peoria, AZ
    Posts
    1
    This code above works great for Firefox and Opera but it's having issues in IE9, seems on the page load or on a refresh it loads by jumping to the top of the page then scrolling to the proper location, any fix for this???

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