Заголовок для примера работы плавного перехода
Нередко случается, когда на сайте, необходимо реализовать плавную прокрутку до объектов (абзац, заголовок, форма связи и т.д.). Без плавной прокрутки, нажимая на кнопку, ведущую на объект, скрол получается моментальным. Это не совсем эстетично конечно.
Внизу скрипт на чистом 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>
Сохраняйте и радуйтесь результату!
Пример скрола (Листайте вниз):
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
⇓
Нажмите на меня
Комментарии ()