Blink screen by clicking on menu before sliding to destination

Question

take a look at this link Fun Wake Park click on the menu and you will notice that before the sliding effect happens, the page goes to the destination and comes back quickly with a blink, what can this be? I’m using the jquery.easing, told me to use the ScrollTo of Tweenmax but I found it complicated I didn’t understand how it applies.

Can you help me with this ?

Code calling the plugin:

$(function() {
$('a').bind('click',function(event){
    var $anchor = $(this);

  $('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top}, 2000,'easeInOutExpo');

 });

});

Answer 1

I think the problem is you’re not stopping the event.

When you click an anchor the browser will open on a new page, or jump to the point of the page. If you use a url it goes to a new page, if you use #id he goes to a certain position where he finds this element within the same page.

Once this behavior is not stopped, the browser goes to that page site and at the same time starts a scroll. This shuffles and gives this effect.

If my theory is right (because I can’t test it on your website) I need to stop the event. And this is how you can do it:

$(function() {
    $('a').bind('click',function(event){
        event.preventDefault(); // ou return false no final desta função
        var $anchor = $(this);
        $('html, body').stop().animate({scrollTop:$($anchor.attr('href')).offset().top}, 2000,'easeInOutExpo');
    });
});