要素内のアンカーをクリックするか、div内の任意の場所にあるアンカーをクリックしてページ上部にスクロールします

ページをページの上部にスクロールします。ナビゲーションdiv ID（ナビゲーション可能な場合）内のいずれかのリンクをクリックすると、ナビゲーションIDが表示されます。要素内のアンカーをクリックするか、div内の任意の場所にあるアンカーをクリックしてページ上部にスクロールします

私はこれを研究しました。最も近いのはjQuery - How to scroll an anchor to the top of the page when clicked?ですが、何らかの理由で私の例でこれをやろうとすると動作しないようです。私は間違って何をしていますか？

私はjQueryとmediumをhtmlとcssで使い慣れています（例のためだけに別のCSSを提供したくないので、divのインラインスタイリングを使用しました）。

AptanaのjQuery - How to scroll an anchor to the top of the page when clicked?からhtmlとスクリプトを読み込むと、それもスクロールしません。 divクラスの上にあるコンテンツdivであっても、スクロールするためのスペースがあります。

私は正確に何を意味するのかを説明するために、関連するdivに2つの小さな段落を含めました。

ご協力いただきありがとうございます。ありがとうございました。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 

<script> 
     $('#scroll_navigation ul li').click(function() { 
      $('html,body').animate({scrollTop: $(this).offset().top}, 800); 
     }); 
    </script> 

<body> 

<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div> 

    <div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599"> 

     <p>Scroll navigation to top of page</p> 
     <p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p> 


      <div id="navigation"> 

       <div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000"> 

        <ul> 
         <p>Catch clicks on anchors to scroll the div id to the top of the page</p> 
         <li><a href="#Portfolio" title="">Portfolio</a></li> 
         <li><a href="#Services" title="">Services</a></li> 
         <li><a href="#About" title="">About</a></li> 
         <li><a href="#Contact" title="">Contact</a></li> 
        </ul> 

       </div> 

      </div> 

    </div> 

<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div> 

</body>

EDIT FirefoxでscrollTopスプライトを使用しているとき、これを注意してください。 Animate scrollTop not working in firefox 私のコードがうまくいたが、スクロールトップがFFでこの問題を起こしていたことを理解してくれました。この同じ例では、その挙動を観察することもできます。下にスクロールしてアンカーを固定すると、FFはターゲットdivの前後に2〜4ピクセルのランダムな位置までスクロールします。

私は現在、Scrolld.jsを使用して、主要なブラウザ間で目的のポイントまで完全なピクセルスクロールを実現しています。私は理解していない限り、異なるブラウザエンジンがscrollTopを異なる（HTMLまたは本文のいずれかの）入力から、私がjQueryを初めて使っているようなものにレンダリングする方法を理解していません。これはjQueryの "不具合"ではなく、ブラウザエンジンがscrollTopをどのようにレンダリングするかということです。

出典

2013-10-13 moderntimes

私はあなたがしたかどうかは分かりませんが、使用するにはjqueryを含める必要があります。もう1つのことは、「クリックリスナー」が次のようなjqueriesドキュメント準備機能にあることです：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script> 

$(document).ready(function(){ 
    $('#scroll_navigation ul li').on('click', function(){ 
     $('html,body').animate({scrollTop: $(this).offset().top}, 800); 
    }); 
}); 

</script>

出典

2013-10-13 23:55:24 lexith

これは機能します。どうもありがとうございました！ただ私が欲しかったのです。はい、私はjQueryをインクルードしましたが、私はドキュメントレディ機能でそれを持っていなければならないのか分かりませんでした。 – moderntimes

要素内のアンカーをクリックするか、div内の任意の場所にあるアンカーをクリックしてページ上部にスクロールします

答えて

関連する問題