javascript - スクロールする
特定のコンテンツへ

Question

左側にメニュー、右側にメインコンテンツがある分割ページを作成しています。メニュー項目をクリックすると、メインコンテンツをその項目までスクロールしたい。

scrollTo()オフセット引数を取るJavaScript を見つけました。

<p>内の特定の要素または他の要素のオフセットを決定する方法はあります<div>か? または、オフセットを知らずに要素にスクロールする別の方法があるでしょうか?

編集

返信ありがとうございます。みんな似たような回答だったようです。しかし、これで問題が発生しました。offset().top（またはposition().top）現在のスクロール位置に応じて異なる値を返すようです。

一番上までスクロールしてセクション 4 を選択すると、期待どおりに動作します。しかし、スクロールすると、正しく機能しなくなります。誰でも何が起こっているかを見ることができますか。

score 1 · Accepted Answer

jquery のメソッドoffsetとposition stat が役立ちます。

また、要素などを受け入れる優れたscrollToプラグインもあります。

score 1 · Accepted Answer

HTMLネイティブ属性を使用できるのに、なぜ難しい方法を試すのですか??

オールドスクールと呼んでいますが、私はシンプルに保つのが好きです。

メニュー内：

使用する：

<ul>
    <li>
        <a href="#Paragraph1">Paragraph 1</a>
    </li>
</ul>

それ以外の

<ul>
    <li>Paragraph 1</li>
</ul>

これにより、セクションが Paragraph1 に等しい # (id) にジャンプします。

score 1 · Accepted Answer

私が誤解していなければ、特定の要素へのアニメーションスクロールが必要なだけで、ポートフォリオで行ったことに似ています。

左側のメニューが固定されていると仮定すると、スクロールしたい要素までページをスクロールするだけです。

$("html, body").animate({
   scrollTop: $('#element').offset().top 
});

特定の要素を別の要素の上に移動する必要がある場合:

$("#element1").animate({
   top: $('#element2').offset().top 
});

score 1 · Accepted Answer

を使用して、要素の垂直方向のオフセットを取得できます$('p').offset().top。これを使用してこれを組み合わせることができますscrollTop()：

$('div').scrollTop($('p').offset().top);

score 1 · Accepted Answer

offset() ではなく position() を使用する必要があります。そのIDがわかれば

その段落タグの位置を簡単に見つけることができます

javascript - スクロールする特定のコンテンツへ