10

私のウェブページには、オーバーフローしたdivがあります（つまり、垂直スクロールバーがあります）。div内には、IDを持つアンカーがあります。これらのIDの1つをURL（mypage.html＃id）に入れると、ページではなくdivがそのアンカーまでスクロールするようにします。

できればプレーンJavaScriptを使用してこれを行うにはどうすればよいですか？複雑すぎる場合は、jQueryを使用しますが、このプロジェクトでは他の目的には使用していません。

4

4 に答える 4

9 
$('.overflow').scrollTop($('#anchor').offset().top);

これを標準のJavaScriptに変換できない理由はまったくありません。

アンカー要素にマージンがある場合、スクロールはオフになることに注意してください。

于 2011-09-22T10:11:59.637 に答える
5

focus()アンカーにセットしようとしましたか？

tabindexを持つすべてのDOM要素はフォーカス可能であり、フォーカスを持つすべての要素はブラウザーによってスクロールされて表示されます。

于 2011-09-22T10:46:35.803 に答える
4

これは、Arielの回答に似た、純粋なJavascript（ECMA 6）ソリューションです。

const overflow = document.querySelector('.overflow');
const anchor = document.getElementById('anchor');

// Get the bounding client rectangles for both
// the overflow container and the target anchor
const rectOverflow = overflow.getBoundingClientRect();
const rectAnchor = anchor.getBoundingClientRect();

// Set the scroll position of the overflow container
overflow.scrollTop = rectAnchor.top - rectOverflow.top;
于 2019-02-22T17:03:07.023 に答える
0

2021年のほぼすべての主要なブラウザを使用している場合は、を使用してelement.scrollIntoView()ください。

https://developer.mozilla.org/docs/Web/API/Element/scrollIntoView

ElementインターフェースのscrollIntoView（）メソッドは、scrollIntoView（）が呼び出された要素がユーザーに表示されるように、要素の親コンテナーをスクロールします-MDN Web Docs

例：

var myEl = document.getElementById("child");
myEl.scrollIntoView()

またはパラメータ付き-SafariまたはInternetExplorerではサポートされていません：

myEl.scrollIntoView({
    block: "center" // Start, center, end, or nearest. Defaults to start.
    behavior: "smooth"
})
于 2021-05-07T17:28:53.237 に答える