Question

I want to make a one page website with a div (navigation) with fixed position and z-index on 999.

The goal is to make the div stay on top and all the other content scroll.
I got this working properly, however i want to make it “more smooth” with easing, but everything i try makes the script stop working. This is the working script:

 $(document).ready(function(){  
      $('a[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) {  
            var targetOffset = $target.offset().top;  
            $('html,body')  
            .animate({scrollTop: targetOffset}, 1000) ;  
           return false;  
          }  
        }  
      });  
    });`  

Can anyone help me with the easing part? I want the scrolling to start fast and slowing down when it is near the anchor.

thanks in advance.

Answer 1

replace

$('html,body') .animate({scrollTop: targetOffset}, 1000) ;

with

$('html,body') .animate({scrollTop: targetOffset}, 1000, 'easeOutQuart');

Make sure you have included jQuery UI core and jQuery Effects core.