JavaScript remember scroll position

Hi Experts!

I found this nice little code snippet for remembering scroll position.

I'm not a javascript-guy. I've tried to put this code inside the <head></head> tags etc. Do I have to do something more? Call the function somewhere?

http://abeautifulsite.net/notebook/10

Thank you!
LVL 2
AphXAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chad HaneyChief Technology OfficerCommented:
You would actually need to use a couple of calls to get this to work.  You would need to use the getScrollXY() and store the values to a cookie on unload,  then onload you would want to send the cookie values to setScrollXY(x, y).

Something like this should work.
<head>
<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}
 
function getScrollXY() {
    var x = 0, y = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        // Netscape
        x = window.pageXOffset;
        y = window.pageYOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        // DOM
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        // IE6 standards compliant mode
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    return [x, y];
}
           
function setScrollXY(x, y) {
    window.scrollTo(x, y);
}
 
function lastScroll(){
    setScrollXY(readCookie("xVar"),readCookie("yVar"));
}
 
function storePosition(){
    createCookie("xVar",getScrollXY()[0],1);
    createCookie("xVar",getScrollXY()[1],1);   
}
 
</script>
</head>
<body onload="lastScroll()" onUnload="storePosition()">

Open in new window

0
AphXAuthor Commented:
Thank you for your really great help!

I can´t get it to work...

What am I doing wrong?

Here is my entire code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
 
<script type="text/javascript">
function createCookie(name,value,days) {
        if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
}
 
function getScrollXY() {
    var x = 0, y = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        // Netscape
        x = window.pageXOffset;
        y = window.pageYOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        // DOM
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        // IE6 standards compliant mode
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    return [x, y];
}
           
function setScrollXY(x, y) {
    window.scrollTo(x, y);
}
 
function lastScroll(){
    setScrollXY(readCookie("xVar"),readCookie("yVar"));
}
 
function storePosition(){
    createCookie("xVar",getScrollXY()[0],1);
    createCookie("xVar",getScrollXY()[1],1);   
}
 
</script>
</head>
<body onload="lastScroll()" onUnload="storePosition()">
 
<!-- 
 
Lots of content here
 
-->
 
</body>
</html>

Open in new window

0
Chad HaneyChief Technology OfficerCommented:
Change

function storePosition(){
    createCookie("xVar",getScrollXY()[0],1);
    createCookie("xVar",getScrollXY()[1],1);  
}

to

function storePosition(){
    createCookie("xVar",getScrollXY()[0],1);
    createCookie("yVar",getScrollXY()[1],1);  
}


and Change

<body onload="lastScroll()" onUnload="storePosition()">

to

<body onload="lastScroll()" onbeforeUnload="storePosition()">


<html>
<head>
<script type="text/javascript">
function createCookie(name,value,days) {
        if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
}
 
function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
}
 
function getScrollXY() {
    var x = 0, y = 0;
    if( typeof( window.pageYOffset ) == 'number' ) {
        // Netscape
        x = window.pageXOffset;
        y = window.pageYOffset;
    } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
        // DOM
        x = document.body.scrollLeft;
        y = document.body.scrollTop;
    } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
        // IE6 standards compliant mode
        x = document.documentElement.scrollLeft;
        y = document.documentElement.scrollTop;
    }
    return [x, y];
}
           
function setScrollXY(x, y) {
    window.scrollTo(x, y);
}
 
function lastScroll(){
    setScrollXY(readCookie("xVar"),readCookie("yVar"));
}
 
function storePosition(){
    createCookie("xVar",getScrollXY()[0],1);
    createCookie("yVar",getScrollXY()[1],1);   
}
 
</script>
</head>
<body onLoad="lastScroll()" onbeforeunload  ="storePosition()">
Line 1<br/><br/>
Line 2<br/><br/>
Line 3<br/><br/>
Line 4<br/><br/>
Line 5<br/><br/>
Line 6<br/><br/>
Line 7<br/><br/>
Line 8<br/><br/>
Line 9<br/><br/>
Line 10<br/><br/>
Line 11<br/><br/>
Line 12<br/><br/>
Line 13<br/><br/>
Line 14<br/><br/>
Line 15<br/><br/>
Line 16<br/><br/>
Line 17<br/><br/>
Line 18<br/><br/>
Line 19<br/><br/>
Line 20<br/><br/>
Line 21<br/><br/>
Line 22<br/><br/>
Line 23<br/><br/>
Line 24<br/><br/>
Line 25<br/><br/>
Line 26<br/><br/>
Line 27<br/><br/>
Line 28<br/><br/>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AphXAuthor Commented:
Really great help! Sorry for late acceptance.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.