0

私の 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');
}
4

1 に答える 1

1

hrefリンクに問題を引き起こす2 つの属性があります。jQueryclickイベントをアンカー要素にアタッチし、アニメーションの終了後にリダイレクトします。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のソリューションを更新しました。

于 2012-08-12T19:31:49.767 に答える