Animation when toggling anchor navigation?

Question

css

Hello! Please advise how to implement the following.
There is a site with anchor navigation, when you click on the link to the anchor, we move to the desired section, how to make it so that when the desired position is reached, the bouncing animation is turned on?
Tried to add {duration: 1000, easing: 'easeOutBounce'} to the source code, but something doesn't work

<nav class="menu">
        <ul>
          <li><a href="#info"><span>1</span></a></li>
          <li><a href="#quiz"><span>2</span></a></li>
          <li><a href="#super"> <span>3</span></a></li>
          <li><a href="#rules"><span class="rules-span">4</span></a></li>
        </ul>
      </nav>

$(document).ready(function(){
  
  $("nav").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
        top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 800);
   });
});

Answer 1

Just include the jquery.easing plugin