0

Посоветуйте, пож-та, где почитать поподробнее о том, как реализуется подстановка #якорей из ссылок в url адресной строки браузера при помощи BOM? Необходимо иметь возможность дать человеку ссылку с якорем вида: www.yandex.ru/page1#yakor

3 ответа 3

1

Можно просто при клике вызвать такое:

element.href = location.hash
1

Страница обновляется к блоку по якорю спускается. Тестировать лучше на своем проекте.

Рабочий код:

$("ol li a").click(function(e) {
    e.preventDefault();

    var param = $(this).attr("href");
    var url = window.location.pathname;

    location.reload();
    window.history.replaceState(null, null, url + param);

  });

var url_param = window.location.hash;

if (url_param != "" && typeof url_param !== "undefined") {
  var body = $("html, body");
  var div = $(url_param).offset();

  body.stop().animate({
    scrollTop: div.top
  }, 500, 'swing', function() {

  });
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 101 Template</title>
  <link rel="stylesheet" type="text/css" href="css/style2.css">
  <!-- Bootstrap -->
  <link href="css/bootstrap.min.css" rel="stylesheet">

</head>

  <body>
    <h1>URL</h1>

    <h2 id="contents">Оглавление</h2>
    <ol>
      <li><a href="#history">История</a></li>
      <li><a href="#structure">Структура URL</a></li>
      <li><a href="#encoding">Кодирование URL</a></li>
    </ol>

    <h2 id="history">История</h2>
    <p>URL был изобретён Тимом Бернерсом-Ли в 1990 году в стенах Европейского совета по ядерным исследованиям в Женеве, Швейцария. URL стал фундаментальной инновацией в Интернете.</p>
    <p>Изначально URL предназначался для обозначения мест расположения ресурсов (чаще всего файлов) во Всемирной паутине. Сейчас URL применяется для обозначения адресов почти всех ресурсов Интернета. Стандарт URL закреплён в документе RFC 1738, прежняя версия
      была определена в RFC 1630.</p>
    <p>Сейчас URL позиционируется как часть более общей системы идентификации ресурсов URI, сам термин URL постепенно уступает место более широкому термину URI. Стандарт URL регулируется организацией IETF и её подразделениями.Появление адресов URL стало
      существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры
      и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.Появление адресов URL
      стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы,
      цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.</p>
    <a href="#contents">К оглавлению</a>

    <h2 id="structure">Структура URL</h2>
    <p>Изначально локатор URL был разработан как система для максимально естественного указания на местонахождения ресурсов в сети. Локатор должен был быть легко расширяемым и использовать лишь ограниченный набор ASCII‐символов (к примеру, пробел никогда
      не применяется в URL). В связи с этим, возникла следующая традиционная форма записи URL:Появление адресов URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком
      — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические
      символы французского языка, то нужные нам символы должны быть перекодированы особым образом.Появление адресов URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком
      — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII: латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические
      символы французского языка, то нужные нам символы должны быть перекодированы особым образом.</p>

    <a href="#contents">К оглавлению</a>

    <h2 id="encoding">Кодирование URL</h2>
    <p>Появление адресов URL стало существенным нововведением в Интернете. Однако с момента его изобретения и по сей день стандарт URL обладает серьёзным недостатком — в нём можно использовать только ограниченный набор символов, даже меньший, нежели в ASCII:
      латинские буквы, цифры и лишь некоторые знаки препинания. Если мы захотим использовать в URL символы кириллицы, или иероглифы, или, скажем, специфические символы французского языка, то нужные нам символы должны быть перекодированы особым образом.</p>
    <a href="#contents">К оглавлению</a>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  </body>

</html>

0

Если речь идёт об одностраничном приложении, то надо подписаться на hashchange.
Ну и при открытии страницы вызвать соответствующий обработчик.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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