Question

我如何获得每个<a name="link1"></a> , <a name="link2"></a>等等的位置/位置

例如，当我点击<a href="#link1">link1</a>

时

我想获取页面上的位置/位置，即<a name="link1"></a>的值等等。

我有以下代码，我想在页面中获取<a name="link1"></a>，<a name="link2"></a>等位置值* （例如top = 500px） *并传递给它在这里

$('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

如果您将“href”称为位置，则可以通过

获取

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

Answer 2

如果您指的是实际位置，您可以在jQuery（http://api.jquery.com/position/）中使用position方法，如下所示：

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

jsfiddle here：http://jsfiddle.net/hZJPw/

Answer 3

<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>

这是在那里使用的结构。所以点击link1转到id =“＃link1”

Jquery：如何获取每个锚链接的位置？

3 个答案: