web-dev-qa-db-ja.com

長いページをDIVにスクロールするJavaScript

長いHTMLページにリンクがあります。クリックすると、ページの別の部分にあるdivがスクロールして表示され、ウィンドウに表示されます。

他の言語のEnsureVisibleに少し似ています。

scrollTopとscrollToをチェックアウトしましたが、赤いニシンのように見えます。

誰でも助けることができますか？

javascripthtml
97
Angus McCoteup

古い質問ですが、誰かがグーグルでこれを見つけた場合（私がしたように）、誰がアンカーやjqueryを使用したくないのですか？要素に「ジャンプ」する組み込みJavaScript関数があります。

document.getElementById('youridhere').scrollIntoView();

そしてさらに良いこと; quirksmodeの優れた互換性テーブルによると、これは すべての主要なブラウザーでサポートされています ！

369
futtta

追加の拡張機能を追加したくない場合は、次のコードがjQueryで機能するはずです。

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
23
Josh

JQuery ScrollTo-このサンプルコードを参照

22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

派手なスクロールはありませんが、そこに行く必要があります。

15
mjallday

スクロールの難しさは、divを表示するためにページをスクロールする必要があるだけでなく、任意のレベルのスクロール可能なdiv内でもスクロールする必要がある場合があることです。

ScrollTopプロパティは、ドキュメント本文を含むすべてのDOM要素で使用できます。それを設定することにより、何かがスクロールされる距離を制御できます。 clientHeightプロパティとscrollHeightプロパティを使用して、必要なスクロール量を確認することもできます（clientHeight（ビューポート）がscrollHeight（コンテンツの高さ）より小さい場合、スクロールが可能です）。

OffsetTopプロパティを使用して、要素がコンテナ内のどこにあるかを把握することもできます。

真に汎用的な「ビューへのスクロール」ルーチンをゼロから構築するには、公開したいノードから開始し、それが親の可視部分にあることを確認してから、親などに対して同じことを繰り返す必要があります。あなたがトップに到達するまでの道。

この手順の1つは次のようになります（未検証のコードで、Edgeのケースをチェックしません）：

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);
  }
}
8
levik

これは私のために働いた

document.getElementById('divElem').scrollIntoView();
7
Xcoder

上記のElement.scrollIntoView()メソッドを使用できます。内部にパラメータを指定しないでおくと、インスタントいスクロールがあります。それを防ぐために、このパラメーターを追加できます-behavior:"smooth"。

例：

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

scroll-here-plzをWebサイト上のdivまたは要素に置き換えるだけです。また、ウィンドウの下部に要素が表示されている場合、または位置が予想したものと異なる場合は、パラメーターblock: ""を試してください。 block: "start"、block: "end"、またはblock: "center"を使用できます。

要確認：オブジェクト{}内では常にパラメーターを使用してください。

それでも問題が解決しない場合は、 https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView にアクセスしてください

このメソッドの詳細なドキュメントがあります。

6
Smelino

回答が投稿されました here -あなたの問題に対する同じ解決策。

編集：スムーズなスクロールが必要な場合、JQueryの答えは非常にいいです-私は前にそれを見ていませんでした。

5
Chuck

名前付きアンカーではないのはなぜですか？

4
Bloodhound

必要なプロパティはlocation.hashです。例えば：

location.hash = 'top'; //名前付きアンカー "topにジャンプします

Dojoまたはそのようなツールキットを使用せずにNiceスクロールアニメーションを実行する方法はわかりませんが、アンカーにジャンプするだけでよい場合は、location.hashで実行する必要があります。

（FF3およびSafari 3.1.2でテスト済み）

4
Scott Swezey

上記のfutttaの返信にコメントを追加することはできませんが、スクロールをよりスムーズにするために：

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

スムーズなスクロールのために、このコードは便利です

$('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;
      }
    }
  });
0
Swarnendu Paul

私は個人的に、上記のJoshのjQueryベースの答えが見た中で最高であり、私のアプリケーションで完璧に動作したことを発見しました...もちろん、私は既に jQueryを使用していました...その1つの目的のためだけにjQライブラリ全体。

乾杯！

編集：OK ...これを投稿してからほんの数秒で、次の答えが表示されました下私（編集後にまだ私の下にあるかどうかはわかりません）

document.getElementById（ 'your_element_ID_here'）。scrollIntoView（）;

これは完璧に機能し、jQueryバージョンよりもはるかに少ないコードで動作します！ JSに.scrollIntoView（）と呼ばれる組み込み関数があるとは思いもしませんでしたが、そこにあります！したがって、ファンシーなアニメーションが必要な場合は、jQueryにアクセスしてください。 Quick n 'dirty ...これを使用してください！

0
Lelando

jQueryプラグイン はDOM要素にスクロールする一般的なケースですが、パフォーマンスに問題がある場合（そしてそうでない場合）、手動で行うことをお勧めします。これには2つのステップが含まれます。

  1. スクロール先の要素の位置を見つける。
  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));
}

出来上がり！

0
Andrey Fedorov

scrollTop（IIRC）は、ドキュメント内でページの上部がスクロールされる場所です。 scrollToは、ページの上部が指定した場所になるようにページをスクロールします。

ここで必要なのは、JavaScriptで操作されるスタイルです。 divを画面外に表示し、右からスクロールしたい場合は、divの左の属性をページの幅に設定し、数秒ごとに必要な場所まで設定量ずつ減らします。

これはあなたを正しい方向に向けるべきです。

追加：申し訳ありませんが、ページ全体をセクションに移動するのではなく、別のdivをどこか（このサイトのように並べる）から「ポップアウト」する必要があると考えました。アンカーを適切に使用すると、その効果が得られます。

0
Benjamin Autin