给锚标签多个函数 - HTML

时间:2012-08-12 18:27:07

标签: javascript html web

在我的网页中,我有多个锚标记,我已将它们指定为单击时滚动到页面顶部。如何让它们向上滚动,然后按顺序重定向到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');
}

1 个答案:

答案 0 :(得分: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更新了解决方案。