Реально ли реализовать стековую ссылку следующим образом?

Question

Реально ли реализовать стековую ссылку следующим образом?

qwerty Мастер (2362), на голосовании 4 месяца назад

Для использования на сайтах со статьями наподобие википедии. Ссылки изначально отображаются и ведут себя как нессылки. Начинают отображаться и вести себя как ссылки при установки галочки/переключении переключателя.
Допустим, пользователь из статьи A по стековой ссылке R переходит в статью B. Дочивает сатью B до конца, нажимает на кнопку "Подняться вверх по стеку", это приводит к тому следующему:
- происходит переход на статью A;
- статья A прокручивается так, чтобы ссылка R оказалась как можно ближе к центру экрана;
- вокруг ссылки R появляется мигающий прямоугольник, который исчезает при нажатии крестика сверху справа от него.
Например, в статье про колебательный контур требуется упоминание конденсатора и катушки индуктивности. Если читатель не знает, что это такое, то мог бы воспользоваться стековой ссылкой.

Answer 1

Да, вполне реально.
Можно использовать комбинацию HTML, CSS и JavaScript.
HTML:
Для создания самой ссылки используй тег <a>, но изначально добавь ей класс stack-link-inactive для отключения стандартного поведения ссылки:

 конденсатор

Добавь чекбокс для включения/отключения ссылок:

  
Включить стековые ссылки

Добавь кнопку "Подняться вверх по стеку":

CSS:
Для неактивных ссылок с классом stack-link-inactive убери подчеркивание и курсор в виде руки:

 .stack-link-inactive { 
  text-decoration: none; 
  cursor: default; 
}

Создай стили для мигающего прямоугольника, который будет появляться вокруг ссылки:

 .stack-link-highlight { 
  animation: blink 1s infinite; 
} 
 
@keyframes blink { 
  0% { 
    outline: 2px solid red; 
  } 
  50% { 
    outline: none; 
  } 
  100% { 
    outline: 2px solid red; 
  } 
}

JavaScript:
Добавь обработчик события "изменение" для чекбокса stack-link-toggle. Внутри обработчика:
Проверяй состояние чекбокса.
Если чекбокс отмечен, то удаляй класс stack-link-inactive у всех ссылок с классом stack-link.
Если чекбокс не отмечен, то добавляй класс stack-link-inactive к ссылкам.
Для каждой ссылки с классом stack-link добавьте обработчик события "клик". Внутри обработчика:
Записывай текущий URL в стек ссылок (можно использовать sessionStorage или localStorage).
Для кнопки "Подняться вверх по стеку" добавь обработчик события "клик". Внутри обработчика:
Получай последний URL из стека ссылок.
Выполняй переход на полученный URL.
Находи ссылку, ведущую на этот URL.
Добавляй к ней класс stack-link-highlight.
Прокручивай страницу, чтобы ссылка оказалась в центре экрана.
Создай крестик для закрытия мигающего прямоугольника и добавь обработчик события "клик", который удаляет класс stack-link-highlight.
Можно, конечно, создать простенькую реализацию, но лучше делать самому для полного контроля процесса.