Scroll combination problem snapscroll/scrollTop

Scroll combination problem snapscroll/scrollTop

Hello,

the website I'm making ( http://wannesverelst.netau.net/portfolio_fullscreen for the moment ) contains 2 normal means of navigation: clicking on the menu or scrolling. The difference is that when you scroll, you get a snapping effect. When you click on a menu you should obviously go to the corresponding div, but it just kinda jumps around. 

The weird part is that when I implement the snapscroll effect OR the menu click, it works perfectly. The problem starts when I combine the 2 together.


The Click functionality is pretty standard,

  1. $('#menu a').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) {     

          $('body').stop().animate({

              scrollTop: target.offset().top

            }, 1000);

          return false;

          }

        }

    });


and there's also a part that changes the menu. I don't believe this is part of the problem, but just to be sure.

Any help to fix this would be awesome.

  1. function onScroll(event){

        var scrollPos = $(document).scrollTop();    

        $('.cl-effect-4 a').each(function () {

            var currLink = $(this);

            var refElement = $(currLink.attr("href"));        

            if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {

                $('.cl-effect-4 li a').removeClass("active");

                currLink.addClass("active");

                $('.text').fadeOut('slow');

            }

        });

    }