Прокрутите позицию div до элемента внутри - PullRequest
Новая
       9

Прокрутите позицию div до элемента внутри

0 голосов
/ 20 октября 2018

У меня есть блок div с другим элементом внутри, и я хочу перейти к каждому из них из индекса, но мой код работает только в первый раз ...

Это пример 

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('#panel').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<div style="width: 500px; height:500px; border:1px solid #eee; display:flex">
  <div style="width:100%; overflow-y:auto;" id="panel">

    <a href="#" id="item_a" style="margin:500px 0; display:block;">item1</a>
    <a href="#" id="item_b" style="margin:500px 0; display:block;">item2</a>
    <a href="#" id="item_c" style="margin:500px 0; display:block;">item3</a>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>

1 Ответ

0 голосов
/ 21 октября 2018

Попробуйте сделать так: 

 $('html, body').animate({
    scrollTop: $("#item_"+id).offset().top - 100
 }, 1000, 'swing');

Поскольку вы хотите анимировать, это html и body, а не панель.

Кстати, я заметил, что на этот вопрос можно ответить с помощью этого: jQuery выделите элемент ;)

ОБНОВЛЕНИЕ:

Теперь я помню (после повторного тестирования), что я изменил ваше значение на a.Я также удалил некоторые стили из ваших оригинальных основных элементов.Если вы не можете запустить его таким образом, дайте мне знать, и мы попробуем другое. 

$(document).on("click", ".goto", function(e) {
  var id = $(this).data('id');

  $('html, body').animate({
    scrollTop: $("#item_" + id).offset().top - 100
  }, 1000, 'swing');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div id="panel">

    <div id="item_a" style="margin:500px 0; display:block;">item1</div>
    <div id="item_b" style="margin:500px 0; display:block;">item2</div>
    <div id="item_c" style="margin:500px 0; display:block;">item3</div>

  </div>
</div>

<a href="#" class="goto" data-id="a">go to item1</a>
<a href="#" class="goto" data-id="b">go to item2</a>
<a href="#" class="goto" data-id="c">go to item3</a>
...