Solved

JavaScript remember scroll position

Posted on 2009-07-09
4
677 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
  • 2
  • 2
4 Comments
 
LVL 12

Expert Comment

by:Chad Haney
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Really great help! Sorry for late acceptance.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now