javascript to maintain scrollbar position from page to page?

  • lyricsride
  • Newbie
  • Newbie
  • lyricsride
  • Posts: 11
  • Loc: Montreal

Post 3+ Months Ago

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!
  • ScienceOfSpock
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1893
  • Loc: Las Vegas

Post 3+ Months Ago

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
  • alias8700
  • Posts: 43

Post 3+ Months Ago

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
  • lyricsride
  • Posts: 11
  • Loc: Montreal

Post 3+ Months Ago

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(){
  7.   if (window.name) window.scrollTo(0, window.name);
  8. }
  9. </script>
  10. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  11. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  12. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  13. <?PHP
  14. define('EATMOO', TRUE);
  15. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  16. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  17. </head>
  18. <body>
  19. <script type="text/javascript">onload="doScroll()" onunload="window.name=document.body.scrollTop"</script>
  20. <div class="siteWrapper">
  21.     <img src="assets/img/banner.png" />
  22.     <div class="wrapperLeft">
  23.         <div class="windowLeft"></div>
  24.         <div id="content">
  25.         <?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
  • alias8700
  • Posts: 43

Post 3+ Months Ago

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
  • lyricsride
  • Posts: 11
  • Loc: Montreal

Post 3+ Months Ago

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(){
  7.   if (window.name) window.scrollTo(0, window.name);
  8. }
  9. </script>
  10. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  11. <link href="/assets/css/site_master.css" rel="stylesheet" type="text/css" />
  12. <link href="/assets/css/page_main.css"  rel="stylesheet" type="text/css" />
  13. <?PHP
  14. define('EATMOO', TRUE);
  15. require_once($_SERVER['DOCUMENT_ROOT'].'/assets/includes/site_config.inc.php');?>
  16. <title>CODES .::. <?PHP echo $pageTitle;?></title>
  17. </head>
  18. <body onload="doScroll()" onunload="window.name=document.body.scrollTop">
  19. <div class="siteWrapper">
  20.     <img src="/assets/img/banner.png" />
  21.     <div class="wrapperLeft">
  22.         <div class="windowLeft"></div>
  23.         <div id="content">
  24.         <?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
  • lyricsride
  • Posts: 11
  • Loc: Montreal

Post 3+ Months Ago

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
  • lyricsride
  • Posts: 11
  • Loc: Montreal

Post 3+ Months Ago

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. }
  12. function doScroll()
  13. {
  14.   if (window.name) window.scrollTo(0, window.name);
  15. }
  • alias8700
  • Beginner
  • Beginner
  • alias8700
  • Posts: 43

Post 3+ Months Ago

nice!
  • Stigma
  • Born
  • Born
  • Stigma
  • Posts: 1

Post 3+ Months Ago

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
  • sammiej
  • Posts: 2
  • Loc: Caribbean

Post 3+ Months Ago

Hey,

Ditto from me! Thanks for another great solution!

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 118 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
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.