[Javascript] Auto scrolling

[javascript@xxxxxxxxxx (Larry Cotton)]

Hi

I've written a contents page that displays/hides sub-section titles when 
you click on a section title. This is done by using the 'display' style 
property. The problem is whenever you 'open up' a list of sub sections the 
browser automatically scrolls to the top of the screen, so you have to 
scroll down to see the newly displayed sub sections.

Does anyone know how to prevent this scrolling to the top ?

The code looks somthing like :

HTML code : consists of a series of divs containing the text for the title 
of each section. Each div has an onClick() handler that calls 
controlExpand(). This functions hides or displays the sub sections as 
appropriate. (Note 1)The top-level sections are put in a table, so the 
section expansion occurs within a table cell, 2) the second column in the 
table consists of standard href links).

<table align="center" style="width: 100%; border-style: outset; 
border-width: 2;">
<tr>
   <th style="border-style: outset; border-width: 2; font-size: 
24pt;">Contents</th>
   <th style="border-style: outset; border-width: 2; font-size: 24pt;">Page 
Link</th>
</tr>
<tr>
   <td style="border-style: outset; border-width: 2;">
     <div id="Intro" style="display: '';" onClick="controlExpand(this, 
2)"><a href="#" style="color: white; font-size: 24pt;">Introduction</a></div>
	  <div id="Intro_0" style="display: 'none';">&nbsp&nbsp <a href="#" 
style="color: white; font-size: 20pt;">Five Kingdoms System</a></div>
	  <div id="Intro_1" style="display: 'none';">&nbsp&nbsp <a href="#" 
style="color: white; font-size: 20pt;">Three Domains System</a></div>
   </td>
   <td style="border-style: outset; border-width: 2;">
     <div id="L_Intro" style="display: '';"><a href="polIntro.htm" 
style="font-size: 24pt;">Introduction</a></div>
	  <div id="L_Intro_0" style="display: 'none';">&nbsp&nbsp <a 
href="polIntroWhit.htm" style="font-size: 20pt;">Five Kingdoms Intro</a></div>
	  <div id="L_Intro_1" style="display: 'none';">&nbsp&nbsp <a href="#" 
style="font-size: 20pt;">Three Domains Intro</a></div>
   </td>
</tr>
<tr>
   <td style="border-style: outset; border-width: 2;">
     <div id="FiveK" style="display: '';" onClick="controlExpand(this, 
1)"><a href="#" style="color: white; font-size: 24pt;">Five Kingdoms</a></div>
	  <div id="FiveK_0" style="display: 'none';" onClick="controlExpand(this, 
1)">&nbsp&nbsp <a href="#" style="color: white; font-size: 
20pt;">Superkingdom: Prokarya</a></div>
	    <div id="FiveK_0_0" style="display: 'none';" 
onClick="controlExpand(this, 2)">&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 18pt;">Kingdom: Bacteria</a></div>
		 <div id="FiveK_0_0_0" style="display: 'none';" 
onClick="controlExpand(this, 1)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 16pt;">Subkingdom: Archaea</a></div>
		   <div id="FiveK_0_0_0_0" style="display: 'none';" 
onClick="controlExpand(this, 2)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
<a href="#" style="color: white; font-size: 14pt;">Division: 
Mendosicutes</a></div>
		     <div id="FiveK_0_0_0_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B1 Euryarchaeota</a></div>
			 <div id="FiveK_0_0_0_0_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B2 Crenarchaeota</a></div>
		 <div id="FiveK_0_0_1" style="display: 'none';" 
onClick="controlExpand(this, 3)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 16pt;">Subkingdom: Eubacteria</a></div>
		   <div id="FiveK_0_0_1_0" style="display: 'none';" 
onClick="controlExpand(this, 6)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
<a href="#" style="color: white; font-size: 14pt;">Division: 
Gracilutes</a></div>
		     <div id="FiveK_0_0_1_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B3 Proteobacteria</a></div>
			 <div id="FiveK_0_0_1_0_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B4 Spirochaetae</a></div>
			 <div id="FiveK_0_0_1_0_2" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B5 Cyanobacteria</a></div>
			 <div id="FiveK_0_0_1_0_3" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B6 Saprospirae</a></div>
			 <div id="FiveK_0_0_1_0_4" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B7 Chloroflexa</a></div>
			 <div id="FiveK_0_0_1_0_5" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B8 Chlorobia</a></div>
		   <div id="FiveK_0_0_1_1" style="display: 'none';" 
onClick="controlExpand(this, 1)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
<a href="#" style="color: white; font-size: 14pt;">Division: 
Tenericutes</a></div>
		     <div id="FiveK_0_0_1_1_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B9 Aphragmabacteria</a></div>
		   <div id="FiveK_0_0_1_2" style="display: 'none';" 
onClick="controlExpand(this, 5)">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp 
<a href="#" style="color: white; font-size: 14pt;">Division: 
Fermicutes</a></div>
		     <div id="FiveK_0_0_1_2_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B10 Endospora</a></div>
			 <div id="FiveK_0_0_1_2_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B11 Pirellulae</a></div>
			 <div id="FiveK_0_0_1_3_2" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B12 Actinobacteria</a></div>
			 <div id="FiveK_0_0_1_2_3" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B13 Deinococci</a></div>
			 <div id="FiveK_0_0_1_2_4" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="color: white; font-size: 14pt;">Phylum: B14 Thermoatogae</a></div>
   </td>
   <td style="border-style: outset; border-width: 2;">
   <div id="L_FiveK" style="display: '';"><a href="#" style="font-size: 
24pt;">Five Kingdoms</a></div>
	  <div id="L_FiveK_0" style="display: 'none';">&nbsp&nbsp <a href="#" 
style="font-size: 20pt;">Superkingdom: Prokarya</a></div>
	    <div id="L_FiveK_0_0" style="display: 'none';">&nbsp&nbsp&nbsp&nbsp <a 
href="#" style="font-size: 18pt;">Kingdom: Bacteria</a></div>
		 <div id="L_FiveK_0_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" style="font-size: 
16pt;">Subkingdom: Archaea</a></div>
		   <div id="L_FiveK_0_0_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Division: Mendosicutes</a></div>
		     <div id="L_FiveK_0_0_0_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B1 Euryarchaeota</a></div>
			 <div id="L_FiveK_0_0_0_0_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B2 Crenarchaeota</a></div>
		 <div id="L_FiveK_0_0_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" style="font-size: 
16pt;">Subkingdom: Eubacteria</a></div>
		   <div id="L_FiveK_0_0_1_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Division: Gracilutes</a></div>
		     <div id="L_FiveK_0_0_1_0_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B3 Proteobacteria</a></div>
			 <div id="L_FiveK_0_0_1_0_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B4 Spirochaetae</a></div>
			 <div id="L_FiveK_0_0_1_0_2" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B5 Cyanobacteria</a></div>
			 <div id="L_FiveK_0_0_1_0_3" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B6 Saprospirae</a></div>
			 <div id="L_FiveK_0_0_1_0_4" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B7 Tenericutes</a></div>
			 <div id="L_FiveK_0_0_1_0_5" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B8 Firmicutes</a></div>
		   <div id="L_FiveK_0_0_1_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Division: Tenericutes</a></div>
		     <div id="L_FiveK_0_0_1_1_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B9 Aphragmabacteria</a></div>
		   <div id="L_FiveK_0_0_1_2" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Division: Fermicutes</a></div>
		     <div id="L_FiveK_0_0_1_2_0" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B10 Endospora</a></div>
			 <div id="L_FiveK_0_0_1_2_1" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B11 Pirellulae</a></div>
			 <div id="L_FiveK_0_0_1_3_2" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B12 Actinobacteria</a></div>
			 <div id="L_FiveK_0_0_1_2_3" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B13 Deinococci</a></div>
			 <div id="L_FiveK_0_0_1_2_4" style="display: 
'none';">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp <a href="#" 
style="font-size: 14pt;">Phylum: B14 Thermoatogae</a></div>
   </td>
</tr>
<tr>
   <td style="border-style: outset; border-width: 2;">
     <div id="ThreeD" style="display: '';" onClick="controlExpand(this, 
0)"><a href="#" style="color: white; font-size: 24pt;">Three Domains</a></div>
   </td>
   <td style="border-style: outset; border-width: 2;">
   </td>
</tr>
</table>
<script language="javascript" type="text/javascript"><!--
bodyEnd();
//--></script>
</body>

Javascript :

function controlExpand(obj, noOfKids)
{
   var i = 0;
   var idRoot = obj.id;

   for(i=0; i<noOfKids; i++)
   {
           var kid = pele(idRoot + "_" + i);
	var linkKid = pele('L_' + idRoot + "_" + i);

	if(kid)
	{
             if(kid.style.display == 'none')
	  {
	    kid.style.display = '';
		linkKid.style.display = '';
	  }
	  else
	  {
	    hideChildren(idRoot + "_" + i);
	    kid.style.display = 'none';
		linkKid.style.display = 'none';
	  }
	}
   }
}

function hideChildren(parentNm)
{
   var i=0;
   var obj;
   var linkObj;
   do
   {
     var cldNm = parentNm + '_' + i;
	obj = pele(cldNm);
	linkObj = pele('L_' + cldNm);
	if(obj)
	{
	  hideChildren(cldNm);
	  obj.style.display = 'none';
	  if(!linkObj) {
	    alert("child ref has no link mapping"); }
	  else {
	    linkObj.style.display = 'none'; }
	  i++;
	}
   } while(obj);
}

Cheer
Larry