плавный переход при нажатии на кнопку 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

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

avatar
40 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
37 Авторы комментариев
AndrewBogAndrewBogMurrayVumMurrayVumMurrayVum Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
StepFoush
Гость

Amoxil Dosage Weight [url=http://apcialisle.com/#]Buy Cialis[/url] Notice Cialis 20mg Buy Cialis Viagra Achat Net

JanleF
Гость

Keflex Side Effect [url=http://apcialisle.com/#]cialis cheapest online prices[/url] Viagra 100mg Buy Cialis E Gravidanza Propecia Finasteride

StepFoush
Гость

Best Overseas Pharmacies [url=https://apcialisle.com/#]viagra and cialis online[/url] Zithromax Swollen Gums Cialis Cialis Generika Legal

JanleF
Гость

Priligy Eyaculacion Precoz [url=https://buyciallisonline.com/#]purchase cialis online[/url] Viagra Para Las Mujeres cialis 5mg Amoxicillin Eye Reaction

AnthonyOvant
Гость
AnthonyOvant

Hi, here on the forum guys advised a cool Dating site, be sure to register – you will not REGRET it https://bit.ly/2UHfpsw

JanleF
Гость

Overnight Pharmacy4u Order [url=https://buyciallisonline.com/#]Cialis[/url] Generic Tadalis Sx Soft Overnight Shipping Cialis Zithromax Frequent Urination

Bupbaipt
Гость
Bupbaipt

buy viagra japan https://canadianpharmacystorm.com when does cialis go generic

Bupbaipt
Гость
Bupbaipt

buy cialis without doctor prescription cialis online does cialis pills look like

Bupbaipt
Гость
Bupbaipt

buy viagra ebay http://cialisxtl.com buy cialis kl

Arturojep
Гость
Arturojep

cialis super active cheap buy viagra viagra cheap canada

JimmyGoori
Гость
JimmyGoori

cialis viagra levitra sale https://edpillsphrm.com can you split cialis pills

RaymondLem
Гость
RaymondLem

cialis for sale in london https://www.sildwithdoctorprescription.com cheap cialis fast

Harryraw
Гость
Harryraw

cheap viagra australia http://kaletra24.com – buy kaletra how do i order viagra

Harryraw
Гость
Harryraw

levitra online cheap http://alexa24ph.com – viagra without a doctor prescription cialis sale no prescription

Harryraw
Гость
Harryraw

do i need a prescription to order viagra http://hydroxychloroquine24.com – buy plaquenil where to buy viagra in vancouver

Harryraw
Гость
Harryraw

safe buy viagra online yahoo http://hydroxychloroquine24.com – plaquenil viagrabuyonline.com

BradleyAnync
Гость
BradleyAnync

viagra buy in usa
viagra online

BradleyAnync
Гость
BradleyAnync

cheap viagra next day
cheap viagra

BradleyAnync
Гость
BradleyAnync
BradleyAnync
Гость
BradleyAnync

buy cialis philippines
viagra without doctor prescription

BradleyAnync
Гость
BradleyAnync

cialis tadalafil tablets
free viagra

BradleyAnync
Гость
BradleyAnync

cialis for sale philippines
viagra without doctor prescription

BradleyAnync
Гость
BradleyAnync

order generic viagra overnight
viagra pills

BradleyAnync
Гость
BradleyAnync

cheap generic cialis no prescription
viagra without doctor prescription

Immof
Гость
Immof

http://reyna.userbet.xyz ПРИСОЕДИНЯЙТЕСЬ СЕЙЧАС И ПОЛУЧИТЕ 100$ К ВАШЕМУ ПЕРВОМУ ДЕПОЗИТУ!
Управляйте роботом самостоятельно! Контроль уровня риска!

[url=http://www.sport-dance.kz/blog/novoe-postupleniya-i-shirokij-assortiment-short-dlya-fitnesa-tantsev-i-aktivnogo-otdyha-#comment_2848]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=https://today.kg/news/8294/]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] [url=https://habarovsk.podarki-market.ru/catalog/product-295031/?MID=2264&result=reply#message2264]Высокотехнологичные инструменты для заработка на криптовалютных активах[/url] f2_601f

MathewDaups
Гость
MathewDaups

when is the best time to take cialis
http://cialisxtl.com/ how long does 20mg cialis keep in system

MathewDaups
Гость
MathewDaups

cialis in canada
http://cialisxtl.com/ cialis online pharmacy

AndrewCig
Гость
AndrewCig

viagra generic availability https://sildenafilprof.com
generic viagra buy australia

AndrewCig
Гость
AndrewCig

sildenafil 20 mg vs viagra https://sildenafilprof.com
generic for viagra

Robertorell
Гость
Robertorell
RichardHap
Гость
RichardHap

when will generic viagra be available: subscription viagra without doctor prescription viagra buy ireland

RichardHap
Гость
RichardHap

online viagra: viagrawithoutdoc viagra without a doctor prescription best online pharmacy to buy cialis

abakaro
Гость

Sintomi Del Levitra [url=https://cheapcialisir.com/]Cialis[/url] Acheter Clomid Sans Ordonnance generic cialis online canada Comparativa Viagra Cialis Levitra

unsenty
Гость

Online Medz [url=https://cheapcialisir.com/]Cialis[/url] precio cialis en farmacias Cialis Get Discount Fluoxetine With Free Shipping

MurrayVum
Гость
MurrayVum

prescription drugs canada buy online prescription drugs online
onlinepharmacyero.com comfortis without vet prescription

MurrayVum
Гость
MurrayVum

comfortis without vet prescription legal to buy prescription drugs without prescription
onlinepharmacyero.com viagra without a doctor prescription walmart

MurrayVum
Гость
MurrayVum

prescription drugs without prior prescription buy prescription drugs without doctor
onlinepharmacyero.com buy prescription drugs online

MurrayVum
Гость
MurrayVum

mexican pharmacy without prescription prescription meds without the prescriptions
onlinepharmacyero.com buy prescription drugs without doctor

AndrewBog
Гость
AndrewBog

cialis 30 day trial voucher cialis tadalafil

AndrewBog
Гость
AndrewBog

generic cialis available cialis without doctor prescription