0

我怎样才能获得这些<a name="link1"></a> , <a name="link2"></a>等的位置/位置

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

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

我有以下代码，我想获取页面中的位置值* （例如顶部=500px） *<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>
4

3 回答 3

0

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

$("a").click(function() {
  alert($(this).attr('href'));
});
于 2013-03-14T16:29:45.920 回答
0

如果您指的是实际位置，则可以使用positionjQuery ( http://api.jquery.com/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/

于 2013-03-14T16:36:55.110 回答
-1 
<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"

于 2013-03-14T16:29:37.960 回答