回答:
古い質問ですが、（私がしたように）グーグルを介してこれを見つけ、アンカーやjqueryを使いたくない人がいますか？要素に「ジャンプ」する組み込みのjavascript関数があります。
document.getElementById('youridhere').scrollIntoView();そしてさらに良いこと quirksmodeの優れた互換性テーブルによると、これはすべての主要なブラウザーでサポートされています。
document.getElementById('#something').scrollIntoView({ behavior: 'smooth', block: 'center' });
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>
<A name='myAnchorALongWayDownThePage"></a>派手なスクロールはありませんが、そこに移動するはずです。
スクロールの難しさは、divを表示するためにページをスクロールする必要があるだけでなく、任意の数のレベルのスクロール可能なdiv内をスクロールする必要がある場合があることです。
scrollTopプロパティは、ドキュメントの本文を含むすべてのDOM要素で使用できます。これを設定することで、スクロールする距離を制御できます。また、clientHeightプロパティとscrollHeightプロパティを使用して、必要なスクロール量を確認することもできます（clientHeight（ビューポート）がscrollHeight（コンテンツの高さ）よりも小さい場合はスクロールが可能です）。
また、offsetTopプロパティを使用して、コンテナ内の要素が配置されている場所を特定することもできます。
真に汎用的な「ビューへのスクロール」ルーチンを最初から作成するには、公開するノードから開始し、それが親の表示部分にあることを確認してから、親についても同じように繰り返す必要があります。頂上までの道。
この1つのステップは次のようになります（テストされていないコードで、エッジケースをチェックしません）。
function scrollIntoView(node) {
var parent = node.parent;
var parentCHeight = parent.clientHeight;
var parentSHeight = parent.scrollHeight;
if (parentSHeight > parentCHeight) {
var nodeHeight = node.clientHeight;
var nodeOffset = node.offsetTop;
var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
parent.scrollTop = scrollOffset;
}
if (parent.parent) {
scrollIntoView(parent);
}
}Element.scrollIntoView()上記の方法を使用できます。内部にパラメータがないままにしておくと、すぐに醜いスクロールになります。これを防ぐには、このパラメーターを追加します- behavior:"smooth"。
例：
document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});ただ、交換するscroll-here-plzあなたにdivウェブサイト上または要素。また、ウィンドウの下部に要素が表示されている場合や、位置が予想と異なる場合は、parameterを試してくださいblock: ""。あなたは使用することができblock: "start"、block: "end"またはblock: "center"。
注意：オブジェクト{}内では常にパラメーターを使用してください。
それでも問題が解決しない場合は、https：//developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoViewにアクセスしてください
このメソッドの詳細なドキュメントがあります。
必要なプロパティはlocation.hashです。例えば：
location.hash = 'top'; //名前付きアンカー「上にジャンプします
dojoやそのようなツールキットを使用せずに素敵なスクロールアニメーションを実行する方法はわかりませんが、アンカーにジャンプする必要がある場合は、location.hashで実行できます。
（FF3およびSafari 3.1.2でテスト済み）
上記のfutttaの返信にコメントを追加することはできませんが、よりスムーズなスクロールの使用のために：
onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"scrollTop（IIRC）は、ドキュメントの上部がスクロールされる場所です。scrollToは、ページの上部が指定した場所になるようにページをスクロールします。
ここで必要なのは、JavaScriptで操作されるいくつかのスタイルです。たとえば、画面外でdivを表示し、右からスクロールインする場合は、divのleft属性をページの幅に設定し、必要な場所になるまで数秒ごとに設定した量だけ減らします。
これはあなたを正しい方向に向けるべきです。
追加：申し訳ありませんが、別のdivがどこかから（このサイトのように時々）ポップアウトし、ページ全体をセクションに移動しないようにしたいと思っていました。アンカーを適切に使用すれば、その効果が得られます。
DOM要素にスクロールする一般的なケース用のjQueryプラグインがありますが、パフォーマンスが問題である場合（そして問題がない場合）、手動で実行することをお勧めします。これには2つのステップが含まれます。
quirksmodeは、前者の背後にあるメカニズムをよく説明しています。これが私の好ましい解決策です：
function absoluteOffset(elem) {
return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}nullから0へのキャストを使用しますが、これは一部のサークルでは適切なエチケットではありませんが、私はそれが好きです:) 2番目の部分ではを使用していwindow.scrollます。したがって、残りの解決策は次のとおりです。
function scrollToElement(elem) {
window.scroll(absoluteOffset(elem));
}出来上がり！
私は個人的に、上記のJoshのjQueryベースの回答が私が見た中で最高であり、自分のアプリケーションに対して完全に機能していることを発見しました...もちろん、私はすでに jQueryを使用していました...そのためだけにjQライブラリ全体を含めなかったでしょう。一つの目的。
乾杯！
編集：OK ...これを投稿してから数秒後に、私はすぐ下に別の答えを見ました（編集後もまだ私の下にあるかどうかはわかりません）。
document.getElementById（ 'your_element_ID_here'）。scrollIntoView（）;
これは完全に機能し、jQueryバージョンよりもはるかに少ないコードで動作します！JSに.scrollIntoView（）という組み込み関数があるとは思いもしませんでしたが、ありました！したがって、派手なアニメーションが必要な場合は、jQueryにアクセスしてください。汚いクイック...これを使って！
スムーズにスクロールするには、このコードが役立ちます
$('a[href*=#scrollToDivId]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - head_height
}, 1000);
return false;
}
}
});