앵커 태그에 여러 기능 제공 - HTML

내 웹 페이지에 여러 개의 앵커 태그가 있으며이를 클릭 할 때 페이지 상단으로 스크롤하도록 지정했습니다. 어떻게 그들을 위로 스크롤하여 href의 페이지로 리다이렉트시킬 것인가?앵커 태그에 여러 기능 제공 - HTML

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>

자바 스크립트

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

출처

2012-08-12 Elmir Kouliev

어쨌든 페이지를 떠나는 이유는 무엇입니까? – fdomig

당신은 문제를 야기 링크에 두 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의 솔루션을 업데이트했습니다.

출처

2012-08-12 19:31:49 mhusaini

링크에 ID를 "link"라고 지정했지만 페이지 상단으로 스크롤하지 않습니다. –

@ElmirKouliev'body' 엘리먼트의 top 속성을 다음과 같이 사용하면 더 잘 작동합니다 :'scrollTop : $ ("body"). offset(). top' – mhusaini

앵커 태그에 여러 기능 제공 - HTML

답변

관련 문제