Довольно часто в лендингах (одностраничных сайтах) можно встретить эффект плавной прокрутки, например, когда пользователь нажимает на какой-то элемент (кнопку, ссылку) браузер плавно перематывает страницу к соответствующему содержимому сайта.
Подумав, что это достаточно полезная штука, я решил сделать легкий скрипт, который позволит вам плавно перематывать страницы как в одну сторону, так и другую. Конечно решить данный вопрос можно использую различные js скрипты, например smootch, но их код довольно большой для таких простых целей.
Немного о скрипте
Якорная ссылка должна выглядеть как обычно и прописываться через решетку: href="#yakor". А тот элемент, на который должен прокручивать экран должен быть обязательно с id указанным в этой ссылке. Также, чтобы якорная ссылка работала она должна иметь класс prokrutkaslide. В этом случае jQuery запускает плавную прокрутку. Если этого класса не будет на ссылке, то она будет работать как обычно - резко проматывать к нужному элементу.
Синтаксис якорной ссылки будет таким:
<a href="#yakor2" class="prokrutkaslide">Перейти к информации</a>
...Большой текст...
<div id="yakor2">Информация</div>
Код для якорной ссылки:
<script>
$(document).ready(function() {
//Плавно прокручивает страницу до id-ка
//Ссылка должна быть с id на якорь и классом prokrutkaslide.
$('.prokrutkaslide').click(function(){
var el = $(this).attr('href');
el = el.replace(/[^\#]*/, ''); //вытаскиваем id из ссылки
$('body,html').animate({
scrollTop: $(el).offset().top}, 1000);
return false;
});
});
</script>
Данный код вы можете вставить внутрь тегов body вашего сайта и использовать по назначению. Там, где число 1000 - это время прокрутки (1 сек.), чтобы поставить больше или меньше меняйте на свое значение.
