Jquery : 각 앵커 링크의 위치를 ​​얻는 방법?

Question

어떻게 <a name="link1"></a> 등의 가치 즉, 등 등

예를 들어 내가 페이지의 위치/위치를 얻으려면 <a href="#link1">link1</a>

를 클릭하면이 <a name="link1"></a> , <a name="link2"></a> 각각 위치/위치를 얻을 수 있습니다 앞으로.

내가, 내가 위치 값을 얻기 위해 다음과 같은 코드를 원하는 한 * (예 : 상단 = 500 픽셀) * <a name="link1"></a>의 페이지에서 <a name="link2"></a> 등이 여기에

$('ul#mainNav li a').click(function (e) { 
    e.preventDefault(); 
    if($(this).attr('href') !== '#'){ 
     var location = $($(this).attr('href')).offset().top - 150; /* For your header height, subtract 150 or whatever it ends up being */ 
     $('html, body').animate({scrollTop: location}, 600); 
    } else { 
     $('html, body').animate({scrollTop: 0}, 600); 
    } 
}); 

<div id="wrapper"> 

    <div id="branding"> 
    <h1>Branding</h1> 
    <ul id="mainNav"> 
    <li class="first"><a href="#">Home</a></li> 
    <li><a href="#link1">link1</a></li> 
    <li><a href="#link2">link2</a></li> 
    <li><a href="#link3">link3</a></li> 

    </ul> 

    </div> 

    <div id="content"> 



     <div id="form-b"> 

     <form id="comments_form" action="#" method="post"> 

    <fieldset> 
     <legend>Your Contact Details Link1 <a name="link1"></a> </legend> 

     <p> 
     <label for="author">Name: <span class="required">(Required)</span></label> 
     <input name="author" id="author" type="text" /> 
     </p> 

     <p> 
     <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label> 
     <input name="email" id="email" type="text" /> 
     </p> 

     <p> 
     <label for="url">Web Address:</label> 
     <input name="url" id="url" type="text" /> 
     </p> 
    </fieldset> 


    <fieldset> 
     <legend>Your Contact Details Link 2<a name="link2"></a> </legend> 
     <p> 
     <label for="author">Name: <span class="required">(Required)</span></label> 
     <input name="author" id="author" type="text" /> 
     </p> 

     <p> 
     <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label> 
     <input name="email" id="email" type="text" /> 
     </p> 

     <p> 
     <label for="url">Web Address:</label> 
     <input name="url" id="url" type="text" /> 
     </p> 
    </fieldset> 
    <fieldset> 
     <legend>Your Contact Details Link 3<a name="link3"></a></legend> 
     <p> 
     <label for="author">Name: <span class="required">(Required)</span></label> 
     <input name="author" id="author" type="text" /> 
     </p> 

     <p> 
     <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label> 
     <input name="email" id="email" type="text" /> 
     </p> 

     <p> 
     <label for="url">Web Address:</label> 
     <input name="url" id="url" type="text" /> 
     </p> 
    </fieldset> 

    <fieldset> 
     <legend>Your Contact Details </legend> 
     <p> 
     <label for="author">Name: <span class="required">(Required)</span></label> 
     <input name="author" id="author" type="text" /> 
     </p> 

     <p> 
     <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span></label> 
     <input name="email" id="email" type="text" /> 
     </p> 

     <p> 
     <label for="url">Web Address:</label> 
     <input name="url" id="url" type="text" /> 
     </p> 
    </fieldset> 

    <fieldset id="submit-b"> 
     <legend> </legend> 
    <div class="wrap"> 
     <p> 
    <input id="submit" class="submit" name="submit" type="submit"/> 
    </p> 
    </div> 
    </fieldset> 

    </form> 


     </div> 

    </div> 



    <div id="footer"> 
    <p>Footer</p> 
    </div> 


    </div> 

Answer 1

하여 실제 위치를 참조하는 경우 것을 얻을 수 있습니다 이런 식으로, (http://api.jquery.com/position/) jQuery를에 position 방법을 사용하십시오

$(document).on("click", "a", function() { 
    var pos = $("[name='" + $(this).attr('href').replace("#", '') + "']").position(); 
    alert("left = " + pos.left + ", top = " + pos.top); 
}); 

jsfiddle 여기 : http://jsfiddle.net/hZJPw/

Answer 2

<li><a href="#link1">link1</a></li> 
<li><a href="#link2">link2</a></li> 
<li><a href="#link3">link3</a></li> 

을 그것을 통과 다음 HTML 코드에서.

<div id="#link1"> Duis autem vel eum iriure </div> 

<div id="#link2"> Duis autem vel eum iriure </div> 

<div id="#link3"> Duis autem vel eum iriure </div> 

이것은 여기 사용 된 구조입니다. 당신이 위치로 "HREF"를 참조하는 경우 이렇게 링크 1 클릭 ID = "# 링크 1"

Answer 3

로 이동, 당신은 당신이 수,

$("a").click(function() { 
    alert($(this).attr('href')); 
});