jQuery單擊事件scrollToTop然後重定向

Question

這可能是一個容易 - 但我似乎無法讓我的頭在這一個。我有一個時髦的導航欄，它是動畫的，我想要一個快速的scrollToTop當一個navbar href被點擊 - 然後我想重定向到該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. 停止鏈接的默認操作並獲取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>

記住的是，重定向不會在代碼片段中工作，你很可能不得不在你的環境中測試這個，但是我在temp index.html文件中確實有這個確切的代碼，它工作得很好。

編輯：

上KevinB的評論跟進，.delay()不會在這種情況下，因爲它是用來排隊的標準效果隊列中的事件工作。根據jQuery API documentation：

.delay（）方法最適合延遲排隊的jQuery效果。因爲它是有限的 - 例如，它不提供取消延遲的方法 - .delay（）不是JavaScript本地setTimeout函數的替代品，可能更適合某些使用情況。