CODEWITHSUNDEEP
javascriptjqueryoffsetcss-position
Tom Perkins
Tom Perkins

Reputation: 499

How to offset a 'back to top' link to account for a fixed header?

I'm using the jQuery easing plugin on a site, but I've run into a small issue around what the plugin thinks is the top of the page.

Here's a link to the site in question.

The reason for this is that I have a header that is fixed to the top of the screen, with a depth of 65px. The problem comes when the plugin trys to scroll a set point to the top of the screen. Because I have this fixed header, my items are starting behind this header.

Does anyone know if there's a way to offset the point that the plugin scrolls to by 65px?

    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
    $('ul.side-nav a').bind('click',function(event){
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
            }, 1500,'easeInOutExpo');
            event.preventDefault();
        });
    });
</script>

Any help is appreciated!

Thanks in advance,

Tom

Upvotes: 0

Views: 1794

Answers (1)

mrtsherman
mrtsherman

Reputation: 39872

Can't you just change the scrollTop value to compensate for the header height?

scrollTop: $($anchor.attr('href')).offset().top - $('.header-wide').height()

Upvotes: 2

Related Questions