Back To Programming / Scripting / Coding Forum

javascript to maintain scrollbar position from page to page?

  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 11
  • Loc: Montreal
  • Status: Offline

Post December 13th, 2006, 1:49 pm

Hey folks, can anyone point me in the direction of a tutorial that would explain how to maintain scrollbar positioning from page to page. I currently have a news system with different tabs showing different sets of news posts. It is PHP/MySQL driven. when i click a tab to show different news posts i don't want the scrollbar to jump to the top.

Thanks a lot!
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post December 13th, 2006, 1:49 pm

  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Joined: Jul 06, 2004
  • Posts: 1890
  • Loc: Las Vegas
  • Status: Offline

Post December 14th, 2006, 1:42 am

Sounds like you're using href="#" on the tabs and a javascript onclick to actually change the page. If that's what you're doing, get rid of the href="#" and add style="cursor:pointer;". That will stop the jumping.
The href="#" tells the page to jump to the top. The reason you need to add the style is because anchor tags without an href do not show the pointer.
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 04, 2006
  • Posts: 43
  • Status: Offline

Post December 14th, 2006, 4:01 am

You could try this solution if your doing a reload when switching tabs

first implement this javascript on the pages you need the functionality on
Code: [ Select ]
function doScroll(){
    if (window.name) window.scrollTo(0, window.name);
}
  1. function doScroll(){
  2.     if (window.name) window.scrollTo(0, window.name);
  3. }


The add this the your body tag
Code: [ Select ]
onload="doScroll()" onunload="window.name=document.body.scrollTop"


Good luck :)
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 11
  • Loc: Montreal
  • Status: Offline

Post December 15th, 2006, 4:48 pm

Thanks for the suggestions guys. I tried the second one by alias but to no avail. the code i used to implement it is as follows. It is a php include file, header.inc.php.
Code: [ Select ]
<!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>
<script type="text/JavaScript" src="../../dynamic_font.js"></script>
<script type="text/JavaScript">
function doScroll(){

  if (window.name) window.scrollTo(0, window.name);

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
<?PHP
define('EATMOO', TRUE);
require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
<title>CODES .::. <?PHP echo $pageTitle;?></title>
</head>

<body>
<script type="text/javascript">onload="doScroll()" onunload="window.name=document.body.scrollTop"</script>
<div class="siteWrapper">
    <img src="assets/img/banner.png" />
    <div class="wrapperLeft">
        <div class="windowLeft"></div>
        <div id="content">
        <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/JavaScript" src="../../dynamic_font.js"></script>
  5. <script type="text/JavaScript">
  6. function doScroll(){
  8.   if (window.name) window.scrollTo(0, window.name);
  10. }
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  13. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  14. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  15. <?PHP
  16. define('EATMOO', TRUE);
  17. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  18. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  19. </head>
  21. <body>
  22. <script type="text/javascript">onload="doScroll()" onunload="window.name=document.body.scrollTop"</script>
  23. <div class="siteWrapper">
  24.     <img src="assets/img/banner.png" />
  25.     <div class="wrapperLeft">
  26.         <div class="windowLeft"></div>
  27.         <div id="content">
  28.         <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>


I use php's $_GET function to pass queries such as "news=3" which are taken by php and load the appropiate news on the mainpage focus panel.
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 04, 2006
  • Posts: 43
  • Status: Offline

Post December 16th, 2006, 3:56 am

sorry, i realize i didn't express my self clearly :)

the <body> tag should look like this
Code: [ Select ]
<body onload="doScroll()" onunload="window.name=document.body.scrollTop">
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 11
  • Loc: Montreal
  • Status: Offline

Post December 16th, 2006, 10:11 am

Hey Alias, no worries on "not being clear", thanks for the help! I tried the slight alteration as you suggested as follows:

Code: [ Select ]
<!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>
<script type="text/JavaScript" src="../../dynamic_font.js"></script>
<script type="text/JavaScript">
function doScroll(){

  if (window.name) window.scrollTo(0, window.name);

}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
<link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
<?PHP
define('EATMOO', TRUE);
require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
<title>CODES .::. <?PHP echo $pageTitle;?></title>
</head>

<body onload="doScroll()" onunload="window.name=document.body.scrollTop">
<div class="siteWrapper">
    <img src="/assets/img/banner.png" />
    <div class="wrapperLeft">
        <div class="windowLeft"></div>
        <div id="content">
        <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/JavaScript" src="../../dynamic_font.js"></script>
  5. <script type="text/JavaScript">
  6. function doScroll(){
  8.   if (window.name) window.scrollTo(0, window.name);
  10. }
  11. </script>
  12. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  13. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  14. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  15. <?PHP
  16. define('EATMOO', TRUE);
  17. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  18. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  19. </head>
  21. <body onload="doScroll()" onunload="window.name=document.body.scrollTop">
  22. <div class="siteWrapper">
  23.     <img src="/assets/img/banner.png" />
  24.     <div class="wrapperLeft">
  25.         <div class="windowLeft"></div>
  26.         <div id="content">
  27.         <?PHP require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_nav.inc.php');?>


There still seems to be no change. For instance when the page loads from:

http://codes.local.ca/main/main.php?news=1

to

http://codes.local.ca/main/main.php?news=2

the scrollbar will not maintain an positioning.


You can see an online version at:
http://vpv4.net/codes2/index.php?news=1

Note that the server version doesn't currently have the proper javascript. I'm just showing you the server version to help illustrate the site in case i didn't explain it well enough before. You can select the different news posts and see the page reloading itself with the $_GET.


------edit
one thing i wanted to mention. Does it matter that you're using javascript in the body tag without declaring it as javascript? How does the browser know it's working with javascript?!
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 11
  • Loc: Montreal
  • Status: Offline

Post December 16th, 2006, 11:04 am

haha i found out the problem! I did some research, discovering that firefox/netscape use different scrollbar detection than IE. Well, that solved my problem ;p.

Thanks for all your help guys!
  • lyricsride
  • Newbie
  • Newbie
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 11
  • Loc: Montreal
  • Status: Offline

Post December 16th, 2006, 11:28 am

This is the code i finally used:

Code: [ Select ]
function detectScrollbar()
{
    if (navigator.appName == "Microsoft Internet Explorer")
    {
        window.name=document.body.scrollTop;
    }
    else
    {
        window.name=window.pageYOffset;
    }
}

function doScroll()
{
  if (window.name) window.scrollTo(0, window.name);
}
  1. function detectScrollbar()
  2. {
  3.     if (navigator.appName == "Microsoft Internet Explorer")
  4.     {
  5.         window.name=document.body.scrollTop;
  6.     }
  7.     else
  8.     {
  9.         window.name=window.pageYOffset;
  10.     }
  11. }
  13. function doScroll()
  14. {
  15.   if (window.name) window.scrollTo(0, window.name);
  16. }
  • alias8700
  • Beginner
  • Beginner
  • No Avatar
  • Joined: Dec 04, 2006
  • Posts: 43
  • Status: Offline

Post December 16th, 2006, 1:04 pm

nice!
  • Stigma
  • Born
  • Born
  • No Avatar
  • Joined: Feb 07, 2008
  • Posts: 1
  • Status: Offline

Post February 7th, 2008, 4:50 am

ScienceOfSpock, thank you very much for this post. I have been struggling for hours to figure this out. I have a page with multiple "Add more" links on it and when its clicked a Thickbox window is used as a "popup". The window contains a form and uses ajax validation. But everytime I clicked on "Add" (a hyperlink on the form with the href="#" set), it jumped to the top of the page.

This was really frustrating me but your post helped me figure it out.
Thanks again.

Keep up the good work guys.
  • sammiej
  • Born
  • Born
  • No Avatar
  • Joined: Aug 07, 2010
  • Posts: 2
  • Loc: Caribbean
  • Status: Offline

Post August 8th, 2010, 6:49 am

Hey,

Ditto from me! Thanks for another great solution!

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 129 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.