Обратная связь

Плавный переход по якорям на чистом JS

Просмотров: 494

На чтение:

Плавный переход по якорям на чистом JS

Заголовок для примера работы плавного перехода

Нередко случается, когда на сайте, необходимо реализовать плавную прокрутку до объектов (абзац, заголовок, форма связи и т.д.). Без плавной прокрутки, нажимая на кнопку, ведущую на объект, скрол получается моментальным. Это не совсем эстетично конечно.

Внизу скрипт на чистом JS, который делает скрул плавным. Просто вставьте вниз страницы и наслаждайтесь.

Скрул работает со всеми объектами, у которых есть ссылка вида #объект. Например, вы хотите чтобы какая-либо кнопка вела на абзац с важным текстом. Этому тексту дайте любое id, например id="comehere".

Саму кнопку оформляйте как обычную ссылку вида href="#comehere".

Внизу страницы разместите скрипт:

 

<script>
$("body").on('click', '[href*="#"]', function(e){
  var fixed_offset = 100;
  $('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - fixed_offset }, 1000);
  e.preventDefault();
});
</script>

Сохраняйте и радуйтесь результату!

Пример скрола (Листайте вниз):

Нажмите на меня

Опубликовано: 24.06.2022

Рейтинг: 5/5 - 1 голосов

Комментарии ()

    Другие статьи

    Почему Modx revo? Преимущества системы перед другими CMS

    В этой статье я попытаюсь объяснить почему в свое время я бросил удобный и несложный Wordpress и "пересел"…

    Рейтинг: 4.3/5 - 4 голосов

    Как клонировать вордпресс при режиме мультисайта?

    Добрый день мои маленькие любители сайтостроительства. На связи Арсен Амбарцумян и сегодня я расскажу…

    Рейтинг: 5/5 - 3 голосов

    Как редактировать страницы в Modx Revo из фронтенда (Не заходя в админку)

    Добрый день Господа разработчики. На связи Арсен Амбарцумян, ваш учитель по старту разработки на системе…

    Рейтинг: 4.7/5 - 3 голосов

    Collaborator.pro ввел санкции против россиян? Мое мнение.

    Недавно на почту пришло письмо от Collaborator.pro. Мол, дескать, пользователям из России мы закрываем…

    Рейтинг: 4.7/5 - 3 голосов

    Katarina (06 мая 2024, 19:35):
    Очень красиво и солнечно!

    Катерина (06 февраля 2024, 14:53):
    там рядом еще горнолыжный комплекс

    Вероника (16 июля 2022, 22:12):
    Москва самый волшебный город. И ночи тут особенные

    MeandI (16 июля 2022, 17:33):
    Тоже с недавних пор перешел на модекс. Скажу откровенно временами трудно, и сам по себе сайт тут строится иначе, чем на любой другой cms. Но система гибкая…

    Кристина (06 июня 2022, 11:16):
    Безумно красиво! Отдает зимним волшебством!

    © 2022 Arsenit.ru - Блог бывшего сео специалиста | Д.Р. блога 23.03.2022