Блог

У меня есть набор ссылок :

 <div id="links">
<a>A</a>
<a>B</a>
<a>C</a>
…
</div>
  

И на той же странице у меня также есть набор вкладок:

 <ul id="target">
<li>#1</li>
<li>#2</li>
<li>#3</li>
….
</ul>
  

как я могу сделать так, чтобы первый < a>(A) прокручивался до первого < li>(#1), а второй < a>(B) прокручивался до второго < li> (#2), а третий < a>(C) прокручивался до третьего < li> (# 3) и так далее …….

Примечание: количество ссылок и их целевых объектов не фиксировано, оно динамическое, поэтому я не могу добавлять идентификаторы к каждому элементу.

Добавьте идентификаторы к элементам списка и свяжите их.

 <div id="links">
    <a href="#link_1">A</a>
    <a href="#link_2">B</a>
    <a href="#link_3">C</a>
  

 <ul id="target">
    <li id="link_1">#1</li>
    <li id="link_2">#2</li>
    <li id="link_3">#3</li>
</ul>
  

Конечно, это решение не анимирует прокрутку, поэтому вы переходите к местоположению в документе. Добавление плагина jQuery, который добавляет анимацию прокрутки, должно работать без изменения кода.

С помощью jQuery вы могли бы сделать что-то вроде этого:

 $('#links a').on('click', function () {
    //get the index of clicked a
    var index = $(this).index();

    //scroll to the li of equal index
    $('html, body').animate({
        scrollTop: $($("#target li").eq(index)).offset().top
    }, 500);
});
  

Вот рабочий пример:

https://jsbin.com/ruwacejifi/edit?html ,js, вывод