Solved

JavaScript remember scroll position

Posted on 2009-07-09
4
690 Views
Last Modified: 2012-08-14
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
Comment
Question by:AphX
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Chad Haney
ID: 24819498
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
 
LVL 2

Author Comment

by:AphX
ID: 24819648
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
 
LVL 12

Accepted Solution

by:
Chad Haney earned 500 total points
ID: 24845434
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
 
LVL 2

Author Closing Comment

by:AphX
ID: 31601842
Really great help! Sorry for late acceptance.
0

Featured Post

[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

635 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question