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?
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
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
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..
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
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.
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.
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???
Reply With Quote
Thanks Padonak it worked by replacing those lines, I just started to learn PHP and Javascript basics, so thanks again for your help.
Bookmarks