2

Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?

Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в < a href = "..."> что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).

Если невозможно, то как это можно реализовать?

0

3 ответа 3

3

Если правильно понял, вы хотели, чтоб ссылка была одна, а проходила все равно по всем якорям, то можно сделать что-то подобное.

В данном примере:

  1. Создаю массив в который буду добавлять все ссылки.
  2. Собираю все h2, пропускаю через цикл и сохраняю их id'шники в массив.
  3. Дальше, создаю пустой счетчик с нуля (потому, что в массиве индекс начинается с нуля)
  4. Привязываю к ссылке функцию на клик в которой проверяю сначала, чтоб счетчик не был больше массива, потом заменяю ссылку в ссылке в атрибуте href, потом увеличиваю счетчик.

Не обращайте внимания на let и const, вы можете их заменить на var.

let arr = [];

$('h2').each(function() {
	arr.push(this.getAttribute('id'));
});

let counter = 0;

$('.link').on('click', function() {
	if (counter <= arr.length - 1) {
  	const $this = $(this);
    $this.prop('href', '#' + arr[counter]);
    counter++;
    console.log(counter);
  }
});
.link {
  position: fixed;
  top: 0;
  right: 0;
  padding: 20px;
  background-color: black;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#link-1" class="link">Следующий</a>

<div class="content">
  <div class="block">
    <h2 id="link-1">Заголовок 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
  </div>
  <div class="block">
    <h2 id="link-2">Заголовок 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
  </div>
  <div class="block">
    <h2 id="link-3">Заголовок 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
  </div>
  <div class="block">
    <h2 id="link-4">Заголовок 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit perferendis placeat, autem repellendus, ab quisquam molestiae dolorem neque minima veniam nesciunt veritatis. Natus laborum enim, hic omnis nostrum! Repudiandae, eveniet, dolore unde eius ipsa cum natus, aliquam perferendis optio a voluptatum et ex earum facilis nihil sint nemo suscipit tempore expedita. Facilis dolore harum aliquid, sed voluptatibus tempore, delectus fugiat ratione, obcaecati, fuga earum quae. Corrupti architecto tempore illum quas fugit quibusdam perspiciatis laborum possimus, eos, fuga iure. Harum magni, rerum illum autem. Expedita, eum ullam sunt doloribus eius ducimus numquam doloremque perferendis deleniti architecto. Fugiat saepe nemo consequuntur aperiam harum vero, accusamus aliquid iste placeat consectetur praesentium ex iure quis quos nisi modi id molestias pariatur commodi, ipsam vel voluptatum, laudantium distinctio? Molestias, blanditiis, aut. Minus sequi provident velit, perferendis eos doloribus reiciendis incidunt tempore ipsum sit optio debitis iste explicabo a. Impedit alias delectus mollitia doloremque, laudantium, tenetur id architecto, minus saepe vitae magni et quo voluptatibus, pariatur corrupti sequi cum ut distinctio est praesentium. Sed nihil eveniet modi id dolorum aspernatur, quo blanditiis dolores ea molestiae consequuntur, illo libero ab placeat facere ullam animi labore in maxime. Aliquid laudantium laborum ipsum beatae quia, sint vero veritatis temporibus quae labore in obcaecati voluptatibus commodi explicabo consequatur id, et reiciendis animi voluptates porro enim omnis libero, possimus nisi. Reprehenderit, aspernatur minima cumque placeat perferendis! A expedita unde dolorem, quia consequatur eligendi facere, magni aspernatur inventore veritatis id, nostrum earum provident, aliquid similique eveniet. Hic vitae ipsam aperiam. Maiores, quis.</p>
  </div>
</div>

8
  • Заранее прошу прощения, в JS не силен. Поверхностно понимаю что там прописано. С ним я работаю на уровне "Ctrl+C Ctrl+v". На сколько я понял там идет перебор номеров ИД? В исполняемом коде я принципа не понял( Мне нужен переход к следующей метке в странице. Тут появляются блоки...
    – Павел
    Commented 24 янв. 2017 в 20:59
  • Разметка неверная. p не может находиться внутри h2 и при парсинге структура изменится.
    – Qwertiy
    Commented 24 янв. 2017 в 21:01
  • Qwertiy, вы правы, через emmet разметку сделал и не заметил, что ошибся.
    – DimenSi
    Commented 24 янв. 2017 в 21:07
  • Ну если кто то будет копипастить - то замечание существенное. Меня лично интересует сам алгоритм и что в нем происходит.
    – Павел
    Commented 24 янв. 2017 в 21:09
  • Павел, добавил объяснения в свой ответ.
    – DimenSi
    Commented 24 янв. 2017 в 21:13
2

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

document.getElementById('next').addEventListener('click', function () {
  var next = document.querySelector("h1:target ~ h1[id]")
          || document.querySelector("h1:target")
          || document.querySelector("h1[id] ~ h1[id]")
  
  if (next) this.href = "#" + next.id
})

document.getElementById('prev').addEventListener('click', function () {
  var prev = document.querySelector("h1:target")
  
  if (prev)
    while (prev = prev.previousElementSibling /* assignment */)
      if (prev.tagName === 'H1' && prev.id)
        break;
      
  this.href = prev ? "#" + prev.id : '#'
})
aside {
  position: fixed;
  right: 8px;
  top: 8px;
}
<aside>
  <a id=prev href=#>prev</a>
  <a id=next href=#>next</a>
</aside>

<h1 id=s1>Возможно ли 1?</h1>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s2>Возможно ли 2?</h1>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s3>Возможно ли 3?</h1>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s4>Возможно ли 4?</h1>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?

9
  • Спасибо, действительно существенное замечание.
    – Павел
    Commented 24 янв. 2017 в 21:26
  • @Павел, исправил баг с переходом ко второму после последнего.
    – Qwertiy
    Commented 24 янв. 2017 в 21:29
  • а как то исправить это можно? "малой кровью"? что бы переход учитывал текущее положение?
    – Павел
    Commented 24 янв. 2017 в 21:38
  • @Павел, переписать алгоритм выбора элемента полностью с селекторов на проверку положений. Не хочу сейчас этим заниматься. Может как-нибудь позже, если никто не ответит.
    – Qwertiy
    Commented 24 янв. 2017 в 21:42
  • 1
    @Павел, scrollTop, getBoundingClientRect, elementFromPoint. Возможно, ещё что-нибудь.
    – Qwertiy
    Commented 24 янв. 2017 в 21:47
2

Без скриптов - только если хардкодить id'шники:

<h1 id=s1>Возможно ли 1?</h1>
<a href=#s2>next</a>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s2>Возможно ли 2?</h1>
<a href=#s1>prev</a> <a href=#s3>next</a>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s3>Возможно ли 3?</h1>
<a href=#s2>prev</a> <a href=#s4>next</a>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?
  
<h1 id=s4>Возможно ли 4?</h1>
<a href=#s3>prev</a>
<p>Не могу найти ответ: возможно ли средствами HTML организовать ссылку к следующей в коде метке?
<p>Для примера есть ссылка с неизвестным пока содержанием и несколько блоков с ID. Что нужно прописать в &lt; a href = "..."&gt; что бы происходил переход к следующей метке в коде (в зависимости от текущего положения).
<p>Если невозможно, то как это можно реализовать?

9
  • хм... то есть в каждом блоке прописывать ссылку на предудущий и следующий блок? Я правильно понял слово "хардкорить"? В принципе для моих задач такой вариант приемлем.
    – Павел
    Commented 24 янв. 2017 в 20:54
  • @Павел такого рода "хардкор" можно и в js запихнуть, чтобы аппендить элементы (prev, next) и тогда всё будет автоматизировано.
    – wokalek
    Commented 24 янв. 2017 в 20:55
  • @Павел, я имел в виду, что каждому блоку должна соответствовать ссылка с прописанным href. Динамического определения, куда перейти дальше, нет.
    – Qwertiy
    Commented 24 янв. 2017 в 20:59
  • VostokSisters, большая просьба, пишите простым языком, я не силен (пока) в слэнге)) То есть в стандартных тэгах нет такой опции типа "перейти к следующей метке"? Думаю с JS заморачиваться не стану, это для меня вообще темный лес. А предложенный вами вариант, пожалуй, рассмотрю повнимательней.
    – Павел
    Commented 24 янв. 2017 в 21:04
  • Я хотел повесить фиксированную кнопку типа "далее" и что бы при клике происходил переход к следующей метке. Быть может стоит попробовать подключить CSS и z-index?
    – Павел
    Commented 24 янв. 2017 в 21:13

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.