6

メニューの[バージョン情報]または[連絡先]をクリックした後、div（例：＃about、＃contact）にスクロールするにはどうすればよいですか？

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>
4

3 に答える 3

10

あなたのhtml：

<div class="masthead">
    <ul class="nav nav-pills pull-right">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
</div>
<div id="about">about</div>
<div id="contact">contact</div>

あなたのJavaScript：

$('ul.nav').find('a').click(function(){
    var $href = $(this).attr('href');
    var $anchor = $('#'+$href).offset();
    window.scrollTo($anchor.left,$anchor.top);
    return false;
});

アニメーションを使用する場合は、

window.scrollTo($anchor.left,$anchor.top);

に

$('body').animate({ scrollTop: $anchor.top });
于 2013-01-25T14:59:36.547 に答える
4

思ったより簡単です。

  <div class="masthead">
    <ul class="nav nav-pills pull-right">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#About">About</a></li>
      <li><a href="#Contact">Contact</a></li>
    </ul>
    <h3 class="muted">Name site</h3>
  </div>


<div id="About">Here's my about</div>

...

<div id="Contact">Here's my contact</div>

nameハッシュを使用すると、そのIDを持つ要素（またはその属性を持つアンカー）に自動スクロールされます。スムーズにスクロールしたい場合は、jqueryなどのjavascriptライブラリを使用してスクロール効果を強化できます。この質問を参照してください：jQueryまたはJavascriptを使用してHTMLページを特定のアンカーにスクロールするにはどうすればよいですか？

于 2013-01-25T14:57:29.217 に答える
0

次の方法でHTMLを使用してジャンプできます。

<a href="#tips">Visit the Useful Tips Section</a>

あなたはCSSでそれをすることができます：

http://css-tricks.com/snippets/jquery/smooth-scrolling/

于 2013-01-25T14:59:12.220 に答える