Плавный скролл до элемента на jQuery
Не редко на сайтах встречается меню, пункты которого «прокручивают» страницу до определённых элементов. В данной статье мы рассмотрим как реализовать плавный скролл используя jQuery.
Начнём со структуры HTML страницы. Атрибуты ссылок href имеют якоря #id которые соответствую блокам до которых необходимо прокручивать страницу.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Плавный scroll jQuery</title> <!--Подключаем jQuery--> <script src="https://code.jquery.com/jquery-1.7.1.min.js"></script> <style> .nav ul{ overflow: hidden; } .nav li{ list-style: none; float: left; } #block1{ width:100%; height:500px; background-color: #f00; } #block2{ width:100%; height:500px; background-color: #0f0; } #block3{ width:100%; height:500px; background-color: #00f; } </style> </head> <body> <div class="nav"> <ul> <li><a href="#block1">block1</a></li> <li><a href="#block2">block2</a></li> <li><a href="#block3">block3</a></li> </ul> </div> <div id="block1">block1</div> <div id="block2">block2</div> <div id="block3">block3</div> </body> </html> |
Теперь мы видим, что скролл успешно работает, остаётся лишь добавить js скрипты, задающие плавность данному эффекту.
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.nav a[href^="#"]').click( function(){ var scroll_el = jQuery(this).attr('href'); var destination = jQuery(scroll_el).offset().top; if (jQuery(scroll_el).length != 0) { jQuery('html, body').animate( { scrollTop: destination }, 1100 ); } return false; }); }) </script> |
2 февраля 2018 /
7648 Views /
8 комментариев