javascript - ページハッシュを変更せずにjavascriptを使用してページ内の要素に移動する方法

Question

ボタンをクリックして、要素「divElem1」に移動する必要があります。出来ますか？このリンクをブラウザに入力するとhttp://myUrl#divElem1、ブラウザはページとDIV要素'divElem1'に移動します。同じ動作は、javascriptを介して取得する必要があります。

ハッシュ変更時に他のイベントが発生するため、私のアプリケーションではハッシュ変更は機能しません。したがって、以下は機能しません。

document.button.onclick = function () {
    location.hash = "#divElem1";
};

document.getElementById("divElem1").focus()要素がdivであるため、も機能していません

score 4 · Accepted Answer

そのために使用できますscrollIntoView：

document.getElementById("divElem1").scrollIntoView()

これにより、ターゲット要素がどこに到達するかを正確に制御することはできませんが、ビューポートに移動されます。さらに、要素がスクロール可能なコンテナ内にある場合、コンテナとその中の要素の両方が位置に移動され、ビューポートに表示されます。

score 1 · Accepted Answer

「プレーンな」Javascript が必要な場合は、scrollIntoView()を使用します。しかし、実際にはその位置にジャンプします。この質問と回答を参照してください。

ここで説明されているように、jQuery を使用すると、ジャンプしたり、多少の緩和を行ったりすることができます。

より良いユーザーエクスペリエンスを提供し、訪問者が何が起こっているかを見て理解できるようにするために、イージングをお勧めします。

2 に答える 2