[jQuery] Scrolling animation problem in Safari

[Kim]

Hi,

Firstly, excuse my newbness if I am asking a stupid question.

I have a click function on a list span that scrolls down to the top of
the list to make sure the about to be revealed content is in the
viewport and then shows the content.

My problem is that in Safari, Opera & Chrome, when another list span
is clicked, I get a nasty flash of the top of the document,(in Opera's
case it scrolls up and back down again) whereas in FF & IE7, the page
stays put and the next div is revealed nicely.

I figure I need to stop the scroll animation if it has already
happened to prevent the flash of the top of the page, but can't work
out how.

Any suggestions appreciated, or any pointers on my general code
structure if it looks rubbish!

thanks

Kim


<div id="services">
  <h2>title</h2>
  <p>some text</p>
  <ul>
    <li><span>text1</span></li>
    <li><span>text2</span></li>
  </ul>
  <div>
    <h3>text1</h3>
    <p>Some Text</p>
  </div>
  <div>
    <h3>text2</h3>
    <p>Some Text</p>
  </div>
</div>

     function showContent(){
       /*scroll to navigation list - Safari  problem flash of top of
document
       animation code 
http://www.learningjquery.com/2007/09/animated-scrolling-with-jquery-12*/
        var targetOffset = $('#services ul').offset().top;
        $('html,body').animate({scrollTop: targetOffset}, 1000);
        //get the span text so can be checked against the div title
text
        var $spanText = $(this).text();
        //get the content divs
        var $divCont = $('#services').children('div');
        //get the h3 of the div to compare later with span text
        var $divh3 = $divCont.children('h3');
        //if there were any divs showing, hide them
        $divCont.hide();
        $('#services ul li span').removeClass('selectedItem');
        $(this).addClass('selectedItem');
        //loop thru div h3 text, find match with span text, show
matched div & exit
          for(var i=0; i < $divCont.length; i++){
             var $isTitle = $divh3.get([i]);
             var $isTitle = $($isTitle).text();
              if ($isTitle == $spanText){
                var $showDiv = $divCont.get([i]);
                $($showDiv).fadeIn('slow')
                break;
              };
            };
        return false;
      };
    $
(this).children('ul').children('li').children('span').bind('click',showContent);