Якорь HTML

Пример якоря

Пример якоря с прокруткой

Для того, что бы создать якорь html первоначально необходимо создать элемент на странице и задать ему атрибут name.

<p><a name="down"></a></p>

После чего нужно создать ссылку вида «#name» Ниже приведен общий вид.

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Быстрый переход внутри документа</title>
 </head>
 <body>
  <p><a href="#down">Вниз</a></p>
  <p>...</p>
  <p><a name="down"></a></p>
 </body>
</html>

Пример работы можно увидеть в самом начале страницы ссылка «Пример якоря»

Все замечательно, но плавная прокрутка смотрится лучше.

Ну, что же давайте сделаем плавный якорь html, для того, что бы сделать плавную прокрутку нам понадобится jquery библиотека и функция animate.

Для начала нам нужно подключить библиотеку jquery, для этого вставляем между <head> и </head> следующую строку.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

После нам нужно добавить код для плавной прокрутки

<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        e.preventDefault();
        return false;
    });
});
</script>

Обратите внимание на число 777, это число отвечает за скорость прокрутки, чем оно больше тем медленнее будет пролистываться страница.

Результат будет выглядеть примерно так

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Быстрый переход внутри документа</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>
<script>
  $(document).ready(function(){
    $("a[href*=#]").on("click", function(e){
        var anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $(anchor.attr('href')).offset().top
        }, 777);
        e.preventDefault();
        return false;
    });
});
</script>
  <a href="#down" class="scrollto">Вниз</a>
  <p>...</p>
  <p><a id="down"></a></p>
 </body>
</html>

Пример работы плавного якоря html вы найдете наверху страницы.

Надеюсь, что статья получилась простая и понятная. С радостью отвечу на вопросы в комментариях.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

÷ 5 = 2