使用缓动jQuery滚动

时间:2016-07-28 21:56:22

标签: javascript jquery html css html5

我正在尝试为一个sigle-paged网站制作动画,当我点击菜单滚动到该部分时,我添加了一个速度恒定的简单动画但是当你点击菜单时我想要这样的东西&gt ;>> http://www.sergioarantes.com/
我发现缓动jquery可能有所帮助,这里是我的js代码“它不工作”

$(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 () { … })

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

理查德。

2 个答案:

答案 0 :(得分:2)

这应该对你有用

// Install the Java helper library from twilio.com/docs/java/install
import com.twilio.sdk.TwilioRestClient;
import com.twilio.sdk.TwilioRestException;
import com.twilio.sdk.resource.instance.sip.Credential;

public class Example { 

  // Find your Account Sid and Token at twilio.com/user/account
  public static final String ACCOUNT_SID = "None";
  public static final String AUTH_TOKEN = "your_auth_token";

  public static void main(String[] args) throws TwilioRestException {
    TwilioRestClient client = new TwilioRestClient(ACCOUNT_SID, AUTH_TOKEN);

    // Get an object from its sid. If you do not have a sid,
    // check out the list resource examples on this page
    Credential credential = client.getAccount().getCredentialList("CL32a3c49700934481addd5ce1659f04d2").getCredential("SC32a3c49700934481addd5ce1659f04d2");
    System.out.println(credential.getUsername()); 
  }
}

答案 1 :(得分:0)

jQuery方法$(selector).animate();需要第一个参数Object,其中包含一些CSS属性camelCase。属性scrollTop不是CSS属性。无论如何,您可以通过某些方式解决问题,例如:

  • 创建一个Javascript / jQuery函数,在文档上设置scrollTop属性,基本上可以用简单的window.setInterval();
  • 来完成
  • 使用CSS技巧(查看Scroll Based Animations jQuery CSS3)在页面上进行滚动效果并为其设置动画。
祝你好运!