Довольно часто в лендингах (одностраничных сайтах) можно встретить эффект плавной прокрутки, например, когда пользователь нажимает на какой-то элемент (кнопку, ссылку) браузер плавно перематывает страницу к соответствующему содержимому сайта.
Подумав, что это достаточно полезная штука, я решил сделать легкий скрипт, который позволит вам плавно перематывать страницы как в одну сторону, так и другую. Конечно решить данный вопрос можно использую различные 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 сек.), чтобы поставить больше или меньше меняйте на свое значение.
(+1 баллов, 1 оценок)
Загрузка...