0

<a name="link1"></a> , <a name="link2"></a>これらなどのそれぞれの場所/位置を取得するにはどうすればよいですか

たとえば、私がクリックしたとき<a href="#link1">link1</a>

ページ上の場所/位置、つまり値などを取得したい<a name="link1"></a> 。

次のコードがあります。ページ内の位置値* (例: top =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

実際の位置を参照している場合は、次のようpositionに jQuery ( 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 に答える