Прокрутить список вверх / вниз до div - PullRequest
Новая
       19

Прокрутить список вверх / вниз до div

0 голосов
/ 24 июня 2019

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

Мое требование заключается в том, чтобы при нажатии на любое из чисел список медленно прокручивался вверх / вниз до позиции div с помощью id="icon". Как я могу это реализовать? 

$('ul li').click(function() {
  alert("dfd");
  $('html, body').animate({
    scrollTop: $("#icon").offset().top
  }, 2000);
})
ul {
  list-style: none;
}

span {
  position: fixed;
  top: 50px;
  left: 35px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<span id="icon"><&nbsp; &nbsp;></span>

https://jsfiddle.net/czjqf3p2/23/

1 Ответ

2 голосов
/ 24 июня 2019

Вместо того, чтобы анимировать HTML / ТЕЛО, попробуйте анимировать UL, как показано в следующем примере. 

$('ul li').click(function(){
var index=$(this).index();
var listPosition = -1*index*50;
$('ul').animate({
        top: listPosition
    }, 600);
})
ul {
  list-style:none; 
  position: fixed; 
  margin-top: 100px;
}
li{
  height: 50px;
  line-height: 50px;
}
span{
  position:fixed;
  top:0;
  left:35px;
  height: 50px;
  line-height: 50px;
  margin-top:100px;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<span id="icon"> < &nbsp; &nbsp; > </span>
...