Плавный скролл к якорю по ссылке (js)
Плавный скролл к якорю очень часто используется при создании лендигов, состоящие из определенных блоков. Это очень удобно и оживит вашу страницу.
Что для этого потребуется:
1. Подключить jQuery (Скачать)
Будьте внимательны, в примере jQuery находится в папке js.
|
1 |
<script src="js/jquery-3.2.1.min.js"></script> |
2. подключить скрипт плавного скролла
|
1 |
<script src="js/common.js"></script> |
common.js
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function() { $('.go_to').click( function(){ var scroll_el = $(this).attr('href'); if ($(scroll_el).length != 0) { $('html, body').animate({ scrollTop: $(scroll_el).offset().top}, 900);scroll_el } return false; }); }); |
Функция click вызывается при нажатии на ссылку с классом go_to и скролит до указанного в ссылке якоря за указанное время (в примере — 900 мс). Если у вас на сайте есть закрепленная шапка, то следует отнять её значение от заданной позиции:
|
1 |
$('html, body').animate({ scrollTop: $(scroll_el).offset().top - (ВЫСОТА ШАПКИ)}, 900);scroll_el |
3. HTML разметка
|
1 2 3 4 5 |
<a class="go_to" href="#about-us"></a> <div id="about-us"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nostrum explicabo tenetur, nesciunt id. </div> |
Возможно, вам будет интересно:
