плавный переход при нажатии на кнопку jquery

Скроллинг к элементу на jQuery. Плавный переход при нажатии на кнопку

Сегодня мы вновь попрактикуемся с jQuery. Мы будем писать скрипт плавного скроллинга при нажатии на кнопку. Сделаем так чтобы при нажатии на кнопку, пользователя плавно переносило на нужный блок. Этот скрипт можно использовать для создания красивого якорного меню.

Вот скрипт, который нам понадобится.

<script type="text/javascript"> 
     function slowScroll(id) { 
         var offset = 0;
         $('html, body').animate({ 
              scrollTop: $(id).offset().top - offset 
         }, 1000);
         return false; 
     } 
</script>

Скрипт состоит из функции, в качестве единственного параметра которой является переменная со значением id блока, куда нужно сделать плавный переход.

Внутри функции в первой строке создается переменная offset со значение 0.

animate – позволяет выполнить пользовательскую анимацию основанную на изменении CSS свойств для выбранных элементов.

scrollTop – получает значение отступа прокрутки сверху для первого элемента в наборе.

Там где стоит 1000, указывается время продолжительности перехода. Изменив это время вы ускоряете, либо замедляете прокрутку.

Как это работает?

Давайте напишем тестовый код, на котором мы попробуем наш скрипт в работе.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <style>
      #block1 {
         margin: 1200px 0px 100px 0px ;
      }
   </style>
</head>
<body>
   <a href="#block1" onclick="slowScroll('#block1')">Заказать звонок!</a>

   <div id="block1">
      Привет!
   </div>

   <script type="text/javascript">
      function slowScroll(id) {
         var offset = 0;
         $('html, body').animate({
            scrollTop: $(id).offset().top - offset
         }, 1000);
         return false;
      }
   </script>
</body>
</html>

Здесь обычный HTML шаблон.

Для того чтобы скрипт работал, вам необходимо подключить библиотеку jquery.

Так же для наглядности, я сделал отступ между тестируемыми элементами, чтобы показать скролл. Я не стал заморачиваться с создание отдельного файла для стилей, и записал все внутрь тега head.

Берем ссылку:

<a href="#block6" onclick="slowScroll('#block6')">Заказать звонок!</a>

В атрибуте href указываем блок к которому нам нужно сделать переход, это прописывается на случай если плавный скролл не сработает, чтобы пользователя все ровно перенесло на выбранный блок. В событии onclick мы указываем название функции и в качестве параметра указываем id блока на который нужно сделать плавный переход.

Вот и все! Я использовал ссылку, вы же можете использовать любой контект, к которому вы укажите событие onclick

На этом всё!

Если у вас есть вопросы, пишите их в нашей группе – https://vk.com/progtime

Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи – https://vk.com/prog_time

В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.

Так же прокачивайте свои навыки на нашем канале – https://www.youtube.com/c/ProgTime

Рекомендованные

Вам также будет интересно

Оставить комментарий

avatar
  Подписаться  
Уведомление о