Nikovit <Путешествия и разработка>

Плавная прокрутка до якоря в html

href.jpg
В этой статья я расскажу как использовать html якоря и сделаем плавную прокрутку с использованием javascript

Для начала создадим html страницу разместим ссылку с якорем и сам якорь ниже:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Anchor</title>
</head>
<body>
    <a href="#anchor">Ссылка на якорь</a>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <div id="#anchor">Якорь</div>
</body>
</html>


Скрипт плавной прокрутки до якоря на js, в поле href*="#anchor" подставляем название нашего якоря.
<script>
    $("body").on('click', '[href*="#anchor"]', function(e){
        var fixed_offset = 100;
        $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
        e.preventDefault();
    });
</script>

Скачать пример страницы с якорем:
Файлы:
anchor.html (1.01 КБ)