1

非表示の DIV (特定の高さがある) には、選択可能なアイコン DIV がたくさんあります。この DIV は、slideDown jQuery 関数によって表示されます。選択したネストされたアイコン DIV (表示されない非表示の div の中央) にスクロールしたい高さ制限の）後はslideDownですので

[trigger-btn] をクリックすると、slideDown 関数を使用して非表示の DIV が表示されるので、[選択可能なアイコンの DIV] の [offset().top] を取得し、[icons-list] の [scrollTop] に適用することをテストしますが、間違った位置に行きました。

<div class="elements-container">
    <div class="trigger-btn"></div>

    <div class="hidden-div-wrapper">

        <select class="icons-library">...</select>

        <div class="find-icon">...</div>

        <div class="icons-list">

            <!-- Selectable Icon DIVs -->

        </div>
    </div>
</div>
4

1 に答える 1

0

これは、私がプロジェクトで一度行った方法です https://jsfiddle.net/bimbonkens/3ssfvyms/

CSS

.slideable {
  background: #000;
  display: none;
}

.slideable div {
  width: 50%;
  margin: 0 auto 50px;
}

.buffer {  
  background: #fff;
  height: 800px;
}

.target {  
  background: #cfc;
  height: 1200px;
}

HTML

<div class="slideable">
  <div class="buffer"></div>
  <div class="target"></div>
</div>

JS

$(document).on("click", function() {
    $('.slideable').slideDown({
    duration: 800,
    done: function() {
        $('body').stop().animate({
        scrollTop: $('.target').offset().top
      })
    }
  });
});

また、ポジションがある場合: 固定; ヘッダーの場合、その高さを考慮する必要があります。

scrollTop: $('.target').offset().top - fixed_element_height

編集

正しい解決策をいじるhttp://jsfiddle.net/bimbonkens/p9huerde/

ここでの重要なポイントは、offset().top がドキュメント全体の上部からのオフセットを取得することです。そのため、それを考慮して、親 div の position().top を減算しました。

于 2016-11-03T09:49:35.313 に答える