Вариант на jQuery
Разметка ссылки с уже присвоенным классом...
<a href="#services">Services</a>
...куда нужно переместится после нажатия на ссылку:
<div id="services"> <h2>Текст заголовка</h2> Контент </div>
Подключаем jQuery
$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
Число 900 — это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.
В случае, если в браузере отключен JavaScript, при клике на данную ссылку страница также перемещается наверх, но уже не плавно.
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |