SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery scroll to animation - distance from top ie issue.

    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:

    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:

    Code:
    <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. #2
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've still not found a solution for this, so I'd really appreciate any pointers here.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •