Выделите элемент в скрытом элементе div после слайда

Там скрытый DIV (имеет определенную высоту), имеет много выбираемых значков DIV, этот DIV отображается с помощью функции jQuery slideDown, я хочу прокрутить до выбранного вложенного значка DIV (в середине скрытого div, который не отображается, потому что ограничения высоты) после слайддаун.. так

После нажатия на [trigger-btn] скрытый DIV, показанный с помощью функции slideDown, поэтому мы проверяем, чтобы получить [offset(). Top] из [DIV выбираемого значка] и применить его к [scrollTop] из [icons-list], но это пошел в неправильную позицию.

<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>

1 ответ

Вот как я это сделал для проекта однажды 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 получает смещение от вершины всего документа, поэтому, чтобы учесть это, я вычел position(). Top из родительского div

Другие вопросы по тегам