Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 698
  • Last Modified:

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!
0
AphX
Asked:
AphX
  • 2
  • 2
1 Solution
 
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
 
AphXAuthor Commented:
Really great help! Sorry for late acceptance.
0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now