javascript - jQuery on click事件到scrollToTop然后重定向

Question

这可能很简单 - 但我似乎无法理解这一点。我有一个时髦的动画导航栏，当单击导航栏 href 时我想要一个快速的 scrollToTop - 然后我想重定向到那个 href。这就是我到目前为止所拥有的，但不太管用。

<script>
  $(document).ready(function () {

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

        $('.scrollup').click(function () {
          $("html, body").animate({
            scrollTop: 0
          }, 600, function() {
             var baseurl = window.location.origin+window.location.pathname;
             $(location).delay(800).attr('href', baseurl + this.getAttribute('href'));
          });
       return false;
    });
  });
</script>

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

<!-- Sticky Navbar -->
<nav class="navbar" role="navigation">
    <!-- Toggle Button -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-ex1-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar top-bar"></span>
            <span class="icon-bar middle-bar"></span>
            <span class="icon-bar bottom-bar"></span>
        </button>
    </div>
    <!-- /Toggle Button -->

    <!-- Center Menu -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
        <ul class="nav navbar-nav navbar-top navbar-left">
            <!-- <li class="active">
                <a class="animated-menu-item" href="#">Home</a>
            </li> -->
            <li>
                <a class="animated-menu-item scrollup" href="/our-wines">OUR WINES</a>
            </li>
            <li>
                <a class="animated-menu-item" href="/about-us">ABOUT US</a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-top navbar-right">
            <li>
                <a class="animated-menu-item" href="/latest">LATEST</a>
            </li>
            <li>
                <a class="animated-menu-item" href="/contact">CONTACT</a>
            </li>
        </ul>
    </div>
    <!-- /Center Menu -->
</nav>

Answer 1

点击链接后，我们可以将函数分为三个主要部分以提高可读性:

1. 停止链接的默认 Action 并获取URL
2. 运行动画
3. 转到链接 URL

下面是它应该是什么样子的一个工作示例，我已经在相关部分上面发表了评论:

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

请记住，重定向不会在代码段内起作用，您很可能必须在您的环境中对此进行测试，但我确实在临时 index.html 文件中有这个确切的代码并且它只是工作很好。

编辑:

根据 KevinB 的评论，.delay() 在此实例中不起作用，因为它用于在标准效果 队列中对事件进行排队。根据 jQuery API documentation :

The .delay() method is best for delaying between queued jQuery effects. Because it is limited — it doesn't, for example, offer a way to cancel the delay — .delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.