用宽松的jQuery滚动

Question

I'm trying to animate one sigle-paged-website and when I click on the menu it scrolls to that section, I added a simple animation with a constant speed but I want something like this when you click on the menu >>> http://www.sergioarantes.com/
I found that easing jquery could help and here is my js code "it's not working"

$(document).ready(function(){

$("#first-showup header nav .nav-bar #menu-items ul li a").click(function(){

var $block = $(this).data("block");

var $thisBlock = $("#"+$block);


  $("html, body").animate({
    "scrollTop": $thisBlock.position().top }, 
          {
              duration: 1200,
              easing: "easeInOutExpo"
          });
  });

On their website on this animation they say to use this model:

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function () { … })

But I can't modify it on my code thank you

Richard.

Answer 1

This should work for you

$(document).ready(function(){

      $("#first-showup header nav .nav-bar #menu-items ul li a").click(function(){

        var $block = $(this).data("block");

        var $thisBlock = $("#"+$block);

             $('html, body').animate({
              scrollTop: $thisBlock.offset().top
            }, 1000);

      });
    });

Answer 2

the jQuery method $(selector).animate(); requires as first parameter a Object containing some CSS properties camelCase written. The property scrollTop is not a CSS property. In any case you can solve the problem in some ways, like:

• Create a Javascript/jQuery function that sets scrollTop property on the document, you can do it basically with a simple window.setInterval();
• Use a CSS Trick (look Scroll Based Animations jQuery CSS3 ) to make scrolling effect on the page and animate it.

Good luck!