リンクをクリックすると、現在のページの div にスクロールするようにするにはどうすればよいですか。1 ページの Web サイトを作成しようとしています (すべてのセクションが 1 ページに配置されます)。
P;S Heres は、私が達成しようとしているものの例です: http://aresiio.com/
質問する
104 次
4 に答える
2
このような：
<a href="#placeToScroll">Bananas</a>
<div id="placeToScroll">All my lovely content</div>
あなたの例では、ナビゲーションが position:fixed に設定されていることを確認する必要があります。
これにより、ページがセクションにジャンプするようになります。少しアニメーションを追加して物事をスムーズにしたい場合は、jQuery を使用できます。
$("a").on("click", function() {
href = $(this).attr('href');
$(document.body).animate({
'scrollTop': $(href).offset().top;
}, 1000);
});
于 2013-07-26T18:08:52.653 に答える
2
これを行うための推奨される方法は、Javascript や CSS ではなく、名前付きアンカーを使用することです。
div の前のようにアンカー要素を配置すると、<a id="section-1"></a>それを使用してリンクすることができ<a href="#section-1">Jump to Section 1</a>、リンクをクリックするとブラウザがそこにスクロールします。
これにより、ブックマークがそのセクションに直接リンクすることもできます。
于 2013-07-26T18:12:06.547 に答える
1
これまでの他のすべての回答は、サイトの名前付きセクションへの HTML アンカー リンク (たとえば、同じページ<a href="#stuff">stuff</a>へのリンク) について話しているものです。<div id="stuff">more stuff</div>
これは機能しますが、リンク先の例のようにスクロールするのではなく、要素に直接「ジャンプ」します。その機能には、非常に人気のあるscrollToのような jQuery プラグインを使用する必要があります。
于 2013-07-26T18:15:55.310 に答える
1
単純なhtmlアンカータグまたはjqueryでそれを行うことができます
于 2013-07-26T18:11:57.717 に答える