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

У меня есть неупорядоченный список с перечисленными номерами. После этого у меня есть тег 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/

Просто чтобы вы знали, вы должны использовать объекты HTML для отображения < и >. Это специальные символы. Вместо этого используйте < и >

— 24.06.2019 10:27

Ok. но как я могу прокручивать список, когда на него нажимают

— 24.06.2019 10:29

javascript jquery html css jquery-animate

24.06.2019 10:15

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

791

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо анимации HTML/BODY попробуйте анимировать 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>

это работает нормально. Спасибо. но я хочу вверх/вниз. текущий код прокручивать слова вверх. Я тоже хочу прокрутить вниз

— 24.06.2019 10:45

это не связано с CSS, я думаю, мне нужно внести еще несколько изменений в js?

— 24.06.2019 10:49

24.06.2019 10:36