Jquery scrolling with pure css parallax doesn't work

Question

I'm trying to work with the famous Keith Clark tutorial for pure css parallax pages (http://blog.keithclark.co.uk/pure-css-parallax-websites/).

So far, so good. The problem comes when I want to combine it with a navbar with jQuery smooth scroll.

The problem occurs when the page is already scrolled. So basically, from the top it scrolls exactly to the point I want it to scroll, but if the page is down on products or contacts, it scrolls to weird places.

I've tried a bunch of different snippets for this but it seems like it just doesn't want to work!

HTML

Navigation:

<ul class="nav navbar-nav navbar-right">
    <li><a href="#group2">Home</a></li>
    <li><a href="#group3">About</a></li>
    <li><a href="#group5">Products</a></li>
    <li><a href="#group7">Contact</a></li>
</ul>

Body:

<div class="parallax">
    <div id="group2" class="parallax__group">
        <div class="parallax__layer parallax__layer--back">
            <div class="title">START</div>
        </div>
    </div>
    <div id="group3" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
            <div class="title">ABOUT</div>
        </div>
    </div>
    <div id="group4" class="parallax__group">
        <div class="parallax__layer parallax__layer--deep">
            <div class="title">RANDOM PICTURE</div>
        </div>
    </div>
    <div id="group5" class="parallax__group">
        <div class="parallax__layer parallax__layer--base">
            <div class="title">PRODUCTS</div>
        </div>
    </div>
    <div id="group6" class="parallax__group">
        <div class="parallax__layer parallax__layer--back">
            <div class="title">RANDOM PICTURE</div>
        </div>
   </div>
   <div id="group7" class="parallax__group">
       <div class="parallax__layer parallax__layer--base">
           <div class="title">CONTACT</div>
       </div>
   </div>
</div>

Jquery:

$(function() {
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('.parallax').animate({
                    scrollTop: target.offset().top
                }, 2500);
                return false;
            }
        }
    });
});

This is the most relevant parts of the code - rest you can find on jsfiddle... http://jsfiddle.net/mgLzejad/1/

Check the code out and see if you can find the error - I can't....

Answer 1

This is jsfiddle: http://jsfiddle.net/mgLzejad/2/

target.offset().top is relative value according to how much $('.parallax') is scrolled. To fix scrollTop value add current scroll value of $('.parallax')

scrollTop: $(target).offset().top + $('.parallax').scrollTop()