2

これまでにこれを扱ったことがないので、探しているものを定義するためにあまりにも多くの言葉を使用している場合、謝罪するかどうかわかりません.

リンクをクリックすると、ページのそのセクションに画面がゆっくりと移動するヘッダーにナビゲーションメニューを作成したいと考えています。

コード構造:

 <div class="header">
      <a href="#about" class="link">About</a>
      <a href="#contact" class="link">Contact</a>
  </div>
  <div class="container">
       Some content
  </div>
  <div class="section2">
      About
  </div>
  <div class="section3">
      Contact
   </div>

ユーザーが [About] をクリックした場合、JQuery を使用してゆっくりとそのセクションにドラッグし、連絡先についても同じようにするにはどうすればよいですか?

4

2 に答える 2

2

セクション名idに 's を追加するだけです:div

<div id='about' class="section2">
     About
</div>

次に、次のコードを使用します。

$('.link').click(function(){
    $('html, body').animate({'scrollTop' : $($(this).attr('href')).offset().top}) //Will maybe be $(window) instead of html,body.
    return false;
})

フィドル: http://jsfiddle.net/Hw4L6/

于 2013-08-24T19:54:23.710 に答える
-1

スムーズなスクロールのために jquery scrollTo.jsスクリプトを使用できます

また

>>のように、 hrefタグにセクションのIDを指定するだけで、スクロールしたいセクションにリンクできます

<a href="#section2" class="link">About</a>

私は2年前に書いた小さなウェブサイトでもscrollTo.jsを使用しました。ここにリンクがあります->

http://students.iitmandi.ac.in/~boga_saikiran/

そこで、右上のContact Meボタンまたは右下のTopボタンをクリックすると、スムーズなスクロール効果が見られます。

それに関連するコードは>>

(jquery js ファイルが head タグに含まれていると仮定します)

1) scrollTo.js ファイルをダウンロードし、html ファイルがあるディレクトリに配置します。

2) これを head タグに含めます

    <script type='text/javascript' src='scrollTo.js'></script>

3) これらをheadタグ内のJavaScriptスクリプトタグに配置します。

   $(document).ready(function()
    {
      $('#link_id').click(function(e)
         {
           $.scrollTo('#about','slow');
           e.preventDefault();
         });
    });
于 2013-08-24T20:03:12.367 に答える