#javascript #jquery #html #css
#javascript #jquery #HTML #css
Вопрос:
У меня есть набор ссылок :
<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) и так далее …….
Примечание: количество ссылок и их целевых объектов не фиксировано, оно динамическое, поэтому я не могу добавлять идентификаторы к каждому элементу.
Ответ №1:
Добавьте идентификаторы к элементам списка и свяжите их.
<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, который добавляет анимацию прокрутки, должно работать без изменения кода.
Ответ №2:
С помощью 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);
});
Вот рабочий пример: