給一個錨定標記多個功能 - HTML

Question

在我的網頁中，我有多個錨定標記，並且我已經指定它們在單擊時滾動到頁面的頂部。我將如何讓它們向上滾動，然後按照該順序重定向到href中的頁面？

的jsfiddle - http://jsfiddle.net/TkdMJ/

HTML

<a href="javascript:void(0)" onClick="goToByScroll('translation_list')" href="VideoPages/Azeri/Heydər Oğuzun1-ci hissə.html"> 
     <li> 
     <img src="../Images/Article Images/GuliyevFace14.png" class="li-image" /> 
     <h3 class="li-header">Heydər Oğuzun Rəsul Quliyevlə Müsahibəsi - 29 İyul 2012, 1-ci hissə</h3> 

     <p class="li-text">Yayımlanıb on Aug 1, 2012 - Rəsul Quliyev</p> 
     <p class="li-text">Heydər Oğuzun Rəsul Quliyevlə müsahibəsi - 29 İyul 2012, 1-ci hissə Heydar Oguz's Interview with Rasul Guliyev on July 29, 2012, Part 1 
</p> 
     </li> 
     </a> 

的Javascript

function goToByScroll(id){ 
     $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
} 

Answer 1

你有這將導致一個問題的鏈接上的兩個href屬性。我會將jQuery click事件附加到錨點元素，並在動畫完成後重定向。您還需要撥打preventDefault，以便默認情況下鏈接不會重定向。

$("#link").click(function(e) { 
    $("body").animate({ 
     scrollTop: $("body").offset().top 
    }, "slow", function() { 
     alert("redirecting to " + $(e.target).attr("href")); 
     window.location.href = $(e.target).attr("href"); 
    }); 

    e.preventDefault(); 
}); 

我更新了此jsFiddle中的解決方案。