使用easing jQuery滚动

Question

我正在尝试动画一个单一页面的网站，当我点击菜单时，它滚动到该部分，我添加了一个简单的动画与恒定的速度，但我想要这样的东西，当你点击菜单>>> http://www.sergioarantes.com/

我发现轻松的jquery可能会有所帮助，下面是我的js代码"it's not code“

$(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"
          });
  });

在他们的网站上，他们说要使用这个模型：

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

但是我不能在我的代码上修改它谢谢

理查德。

Answer 1

这对你来说应该是可行的

$(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

jQuery方法$(selector).animate();需要一个包含一些camelCase编写的CSS属性的Object作为第一个参数。属性scrollTop不是CSS属性。在任何情况下，您都可以通过某些方式来解决问题，例如：

Trick on >创建一个Javascript/jQuery函数来设置文档的scrollTop属性，基本上可以用一个简单的window.setInterval();

• Use a CSS技巧(Scroll Based Animations jQuery CSS3)来实现页面上的滚动效果和动画效果。

祝好运!