We use hashes a lot in our URIs to jump people around to a specific place on the page. For example (www.example.com#part1 and www.example.com#part2). However, we have a static fixed header at the top of the page, and so if it tries to jump you down, it ends up plopping what you need to see in a place that's covered by the static header.

Is it possible to use javascript (preferably jQuery) to intercept all hash jumps and add 100px to wherever it's going to take you?

Recommended Answers

All 3 Replies

Something like this? Not sure if the scrollTo can be used relative (never used it).

Thanks guys! What's funny is I'm already using the hashchange trigger elsewhere and for some reason I was still blank!

Here's what I'm doing. Works like a charm:

$(window).on('hashchange', function() {
    var header = $('#static-header.fixed');
    if (window.location.hash != '' && header.length) {
        var position = $(window).scrollTop();
        $(window).scrollTop(position - header.outerHeight());
        return false;
    }
});
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.