如何在用戶點擊鏈接前轉到其他頁面之前滾動到頂部？

我試圖在我的網站上創建流暢的頁面轉換，以便用戶在點擊指向其他頁面的鏈接時不會感覺到「頁面加載」。我想要的兩個例子是minimalissimo.com和defringe.com。當您在這些網站的任何頁面上點擊指向不同文章的鏈接時，頁面會在下一頁開始加載之前將滾動動畫顯示爲頂部。如何在用戶點擊鏈接前轉到其他頁面之前滾動到頂部？

到目前爲止，我有以下代碼：

jQuery(document).ready(function($){ 

    $back_to_top = $('.link-to-article'); 

    $back_to_top.on('click', function(){ 
    $("html, body").animate({scrollTop:0},260); 
    }); 

});

上面的代碼不工作，當您單擊與類的鏈接不會出現滾動;但是，如果我使用防止默認值，那麼頁面會滾動到頂部，但當然由於使用preventDefault禁用了鏈接，所以下一頁不會打開。

請讓我知道，如果你能幫助。謝謝。

來源

2015-04-23 Sameer Zahid

你是正確的，你將需要使用preventDefault，但你也將需要手動重定向一旦動畫完成：

$back_to_top.on('click', function(){ 
    var href = $(this).attr('href'); 
    $(document.body).animate({scrollTop:0}, 260, function() { 
     window.location.href = href; 
    }); 
    return false; 
});

來源

2015-04-23 08:19:36

我複製你的代碼，它的工作完美，即便是不添加'preventDefault'。但是，我只關心使用'window.location.href'使鏈接工作是否有風險。如果有人禁用JavaScript或使用舊瀏覽器或其他東西，我是否需要擔心鏈接無法正常工作？謝謝！ –

@SameerZahidd：不，你仍然會有優雅的退化，因爲如果javascript沒有啓用，點擊將不會被攔截。右鍵單擊「在新選項卡中打開」等仍然有效，因爲地址在'href'中指定（但不會啓動滾動）。這種方法會失去什麼是原始鏈接的「目標」。如果這對你很重要，你可以嘗試使用[.one]（http://api.jquery.com/one/）僅捕獲第一次點擊，然後在該事件結束時手動調用'click'。但是如果你不依賴'target'，我會說上面的解決方案更簡潔。 –

好吧，這是有道理的，沒有目標對我來說不重要。我只是使用你上面顯示的內容。非常感謝！ –

jQuery(document).ready(function ($) { 
    $back_to_top = $('.link-to-article'); 

    $back_to_top.on('click', function (e) { 
     e.preventDefault(); 
     $this = $(this); 
     $("html, body").animate({ 
      scrollTop: 0 
     }, 260, function() { 
      window.location.href = $this.attr('href'); 
     }); 
    }); 
}(jQuery));

來源

2015-04-23 08:20:44 Tushar

如何在用戶點擊鏈接前轉到其他頁面之前滾動到頂部？

回答

相關問題