Question

这可能很容易 - 但我似乎无法理解这一点。我有一个动画的时髦导航栏，我想在点击一个导航栏href时快速scrollToTop - 然后我想重定向到那个href。这就是我迄今为止所做的，但这并不常用。

08-01 19:16:58.204 7380-7380/com.example.android E/AndroidRuntime: FATAL EXCEPTION: main
   Process: com.example.android, PID: 7380
   java.lang.IllegalStateException: Could not execute method for android:onClick
       at android.support.v7.app.AppCompatViewInflater$DeclaredOnClickListener.onClick(AppCompatViewInflater.java:293)
       at android.view.View.performClick(View.java:5273)
       at android.view.View$PerformClick.run(View.java:21225)
       at android.os.Handler.handleCallback(Handler.java:739)
       at android.os.Handler.dispatchMessage(Handler.java:95)
       at android.os.Looper.loop(Looper.java:224)
       at android.app.ActivityThread.main(ActivityThread.java:5514)
       at java.lang.reflect.Method.invoke(Native Method)
       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)
    Caused by: java.lang.reflect.InvocationTargetException
       at java.lang.reflect.Method.invoke(Native Method)
       at android.support.v7.app.AppCompatViewInflater$DeclaredOnClickListener.onClick(AppCompatViewInflater.java:288)
       at android.view.View.performClick(View.java:5273) 
       at android.view.View$PerformClick.run(View.java:21225) 
       at android.os.Handler.handleCallback(Handler.java:739) 
       at android.os.Handler.dispatchMessage(Handler.java:95) 
       at android.os.Looper.loop(Looper.java:224) 
       at android.app.ActivityThread.main(ActivityThread.java:5514) 
       at java.lang.reflect.Method.invoke(Native Method) 
       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616) 
    Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'boolean java.lang.Object.equals(java.lang.Object)' on a null object reference
       at com.example.android.landingPage.submitPassword(landingPage.java:33)
       at java.lang.reflect.Method.invoke(Native Method) 
       at android.support.v7.app.AppCompatViewInflater$DeclaredOnClickListener.onClick(AppCompatViewInflater.java:288) 
       at android.view.View.performClick(View.java:5273) 
       at android.view.View$PerformClick.run(View.java:21225) 
       at android.os.Handler.handleCallback(Handler.java:739) 
       at android.os.Handler.dispatchMessage(Handler.java:95) 
       at android.os.Looper.loop(Looper.java:224) 
       at android.app.ActivityThread.main(ActivityThread.java:5514) 
       at java.lang.reflect.Method.invoke(Native Method) 
       at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) 
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

如果有人需要，这是与导航栏相关的基本html：

{{1}}

Answer 1

点击链接后，我们可以将功能分为三个主要部分以便于阅读：

停止链接的默认操作并获取网址
运行动画
转到链接网址

下面是一个应该是什么样子的工作示例，我在上面评论了相关部分：

$(document).ready(function(){
    $('.link').click(function(e){

        //stop the link from immediately working
        e.preventDefault();
        
        //get the link href
        var href = $(this).attr('href');
        
        //do your animation
        $("html, body").animate({
            scrollTop: 0
        }, 600);
        
        //wait 600 ms and redirect to the URL we grabbed earlier
        setTimeout(function(){ 
            window.location = href;
        }, 600, href);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="link" href="http://www.google.com">Google Link</a>

请记住，重定向不会在代码段内部发挥作用，您很可能必须在您的环境中对此进行测试，但我确实在temp.html index文件中有这个确切的代码，它只能工作细

修改

跟进KevinB的评论后，.delay()将无法在此实例中使用，因为它用于对标准效果队列中的事件进行排队。根据{{3}}：

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法 - .delay（）不能替代JavaScript的本机setTimeout函数，这可能更适合某些用例。

点击事件上的jQuery to scrollToTop然后重定向

1 个答案: