Jquery scroll to animation - distance from top ie issue

JavaScript
1

Hi There,

I’ve got a scrolling effect working for some on-page anchors, and though this works in most modern browsers, in internet explorer 8 and below there is a small problem.

You see, there’s a fixed header which was hiding the top of each anchor after being clicked, so I set the scroll to move down an extra 140 pixels, and this works a treat. It even works in ie8 and below, except after moving into position, the 140 pixel margin then reverses and the content then moves below the header.

Here’s the jquery code:

  <script>

(function($){

    var jump=function(e)
    {
       if (e){
           e.preventDefault();
           var target = $(this).attr("href");
       }else{
           var target = location.hash;
       }

       $('html,body').animate(
       {
           scrollTop: $(target).offset().top -140
       },1000,function()
       {
           location.hash = target;
       });

    }

    $('html, body').hide()

    $(document).ready(function()
    {
        $('a[href^=#]').bind("click", jump);

        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show()
                jump()
            }, 0);
        }else{
          $('html, body').show()
        }
    });

})(jQuery)
		
</script>

And the links:

<ul>
<li><a href="#history">HISTORY</a></li>
<li><a href="#philo">PHILOSOPHY</a></li>
<li><a href="#approach">APPROACH</a></li>
</ul>

The purpose of the second half of the jquery is to enable the scrolling effect after clicking through to one of the anchors from another page.

Any help would be massively appreciated. Here’s the page itself if that is of any use: http://bit.ly/No0aaV - and it’s the About Us drop menu links that this issue relates to.

Thank you!
Dan

2

I’ve still not found a solution for this, so I’d really appreciate any pointers here.