title: Auto scroll accordion to the top of the clicked section
body: <p>I have the following code for an accordion content holder that works fine. I cant seem to workout how to auto-scroll the page to the top of the clicked section. Right now the container opens but the page doesnt scroll at all.</p>
  
  <p>Please help !
  G</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;meta name = "viewport" content = "user-scalable = no"&gt;
  
  &lt;title&gt;TEST&lt;/title&gt;
  &lt;link href="style/english.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="style/reset.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="style/jquery.ui.all.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"&gt;
  &lt;script type="text/javascript" src="scripts/jquery1.8.2.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="scripts/jquery-ui-1.10.3.custom.js"&gt;&lt;/script&gt;
  
  
  &lt;!--Accordian menu JQuery--&gt;
  &lt;script type="text/javascript"&gt;
  $(function() {
          $( "#accordion" ).accordion({
              active: 'none',
              heightStyle: "content",
              collapsible: true,
              /*heightStyle: "fill"*/
          });
      });
  
  
  &lt;/script&gt;
  
  
  &lt;script&gt;
   function Clicked1(){  
  $( "#accordion" ).accordion({ active: 0 });
   } 
  
   function Clicked2(){  
  $( "#accordion" ).accordion({ active: 1 });
   } 
  
   function Clicked3(){  
  $( "#accordion" ).accordion({ active: 2 });
   }
  
   function Clicked4(){  
  $( "#accordion" ).accordion({ active: 3 });
   }
  
   function Clicked5(){  
  $( "#accordion" ).accordion({ active: 4 });
   }
  
   function Clicked6(){  
  $( "#accordion" ).accordion({ active: 5 });
   }
  
  &lt;/script&gt;
  &lt;!--Accordian menu JQuery--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="mainContainer"  style="background-color:#009edb;"&gt;
  
      &lt;!--Header--&gt;
      &lt;div id="headerContainer"&gt;
  
          &lt;a href="index.html"&gt;&lt;img src="images/header.jpg" width="1000" height="110" border="0" /&gt;&lt;/a&gt;
  
      &lt;!--Menu--&gt;
      NAVIGATION CODE
      &lt;!--Menu--&gt;
      &lt;/div&gt;
          &lt;!--Header--&gt;
  
          &lt;!--Body--&gt;
      &lt;div id="mainBodyContainerWhite"&gt;
      &lt;div id="topExtra"&gt;&lt;/div&gt;
  
          &lt;!--Spotlight--&gt;
      &lt;div id="spotlightBoxContainer"&gt;
      &lt;div id="spotlightBoxFull" style="height:440px;"&gt;&lt;img src="images/case_spotlight.jpg" width="986" height="508" usemap="#Map2" border="0" /&gt;
            &lt;map name="Map2" id="Map2"&gt;
              &lt;area shape="rect" coords="1,1,247,169" href="#section1" onclick="Clicked1()" id="scroll" /&gt;
              &lt;area shape="rect" coords="494,2,740,169" href="#section1" onclick="Clicked2()" id="scroll" /&gt;
              &lt;area shape="rect" coords="248,170,492,338" href="#section1" onclick="Clicked3()" id="scroll" /&gt;
              &lt;area shape="rect" coords="741,171,983,335" href="#section1" onclick="Clicked4()" id="scroll" /&gt;
              &lt;area shape="rect" coords="3,338,247,506" href="#section1" onclick="Clicked5()" id="scroll" /&gt;
              &lt;area shape="rect" coords="491,338,739,507" href="#section1" onclick="Clicked6()" id="scroll" /&gt;
            &lt;/map&gt;
      &lt;/div&gt;  
      &lt;/div&gt;
      &lt;!--Spotlight--&gt;
  
  
      &lt;div id="accordion"&gt;
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 1&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 2&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 3&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 4&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 5&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;"&gt;ACCORDIAN 6&lt;/span&gt;&lt;/h3&gt;
          &lt;div class="accordion-content"&gt;
              &lt;div id="ContainerLeftInner"&gt;
              &lt;div class="textInner"&gt;
              TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST.
              &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;!--Split--&gt; 
      &lt;/div&gt;    
      &lt;!--Spotlight--&gt;    
      &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;!--Body--&gt;
  
  &lt;div id="footerContainer"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>