Accounting for a fixed header with animate.scrolltop and (target).offset().top;

I know this is an old question (kind of) but I ran into a similar problem with a fixed dropdown navigation on a website. Note this is a smooth scroll code snippet, though you could easily make it automatic by changing the animation speed.

jQuery:

$('body').on('click','a[href^="#"]',function(event){
    event.preventDefault();
    var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
    //change this number to create the additional off set        
    var customoffset = 75
    $('html, body').animate({scrollTop:target_offset - customoffset}, 500);
});

I have used this chunk of code for a long time without any issues. The only thing I dislike about it, is it will grab ANY # tag. So in a plugin like Flexslider plugin where the navigation uses #'s I manually strip them from the plugin.

EDITED: You just need to detect the height of the fixed header and subtract that from the scrollToPosition which you were doing correctly. The issue is the window.location.hash = "" + target; jumps the page to top of the element with that id. So if you animate there like you were doing and then change to that hash it will "bounce back" like you described. Here is the first way we can combat this:

// Get the height of the header
var headerHeight = $("div#header").height();

// Attach the click event
$('a[href*=#]').bind("click", function(e) {
    e.preventDefault();

    var target = $(this).attr("href"); //Get the target
    var scrollToPosition = $(target).offset().top - headerHeight;

    $('html').animate({ 'scrollTop': scrollToPosition }, 600, function(){
        window.location.hash = "" + target;
        // This hash change will jump the page to the top of the div with the same id
        // so we need to force the page to back to the end of the animation
        $('html').animate({ 'scrollTop': scrollToPosition }, 0);
    });

    $('body').append("called");
});

Here's a new jsfiddle for this first method: http://jsfiddle.net/yjcRv/1/

FURTHER EDIT: An even better way to control hash change events is to use a plugin like jQuery Address. With this you can utilise your hashchange events much more. Here's an example usage:

// Get the height of the header
var headerHeight = $("div#header").height();

$.address.change(function(evt){
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data

    // If there's been some content requested go to it…else go to the top
    if(evt["pathNames"][0]){
        var scrollToPosition = $(target).offset().top - headerHeight;
        $('html').animate({ 'scrollTop': scrollToPosition }, 600);
    }else{
        $('html').animate({ 'scrollTop': '0' }, 600);
    }

    return false;
});

// Attach the click event
$('a').bind("click", function(e) {
    // Change the location
    $.address.value($(this).attr("href"));

    return false;
});

Live example here: http://www.vdotgood.com/stack/user3444.html

NOTE: You don't need to add the hash to your links href attribute now. Here's a link that you could target with a jQuery selector:

<!-- This is correct -->
<a href="/target" class="myclass">Target</a>

<!-- These are incorrect -->
<a href="/#/target" class="myclass">Target</a>

<a href="#/target" class="myclass">Target</a>

To target this link you'd use a selector like:

$("a.myclass").click(function(){
    $.address.value($(this).attr("href"));
    return false;
});

---

jQuery Address does in fact look for links that have the following attribute:

<a href="/target" rel="address:/target">Target</a>

The rel attribute here contains address: followed by a relative url defined by you in this case /target. If you use this, jQuery Address will detect the link and fire the hash change event automatically.