Главная » Создание сайтов » Программирование » Делаем плавный скролл наверх

Делаем плавный скролл наверх

Делаем скролл наверх с помощью jQueryСогласитесь, не совсем удобно после прочтения страницы сайта использовать скрол используемого манипулятора (мышь, touch-pad и т.д.). Куда удобнее, нажать на ссылку наверх и переместится на исходное положение страницы. Сегодня я расскажу, как сделать плавный скролл наверх страницы. :)

В практически всех современных дизайнах есть такая полезная стрелочка, которая поднимает фокус экрана в «шапку» сайта. Зачастую программисты делают это так: создают якорь, и тогда мы нажимаем на эту ссылку, мы рывком перекидываетесь на вверх страницы.

Я же уже очень давно использую скрипт плавного скролла на jQuery:

1) Первое, что нам необходимо сделать — это подключить фреймворк jQuery;
2) Затем вставляем следующий код:

<script type="text/javascript">
(function($){
$(document).ready(function(){ //Функция обратного вызова вызывающаяся тогда когда документ загрузится
$('.up').click(function(){ //К ссылке <a class="up" href="#">На вверх</a> вешаем обработчик click
$('html, body').animate({ //К body и html принимаем анимацию
scrollTop:0 //Скрол на вверх к 0
},1000); //За 1000 мс (1сек)
return false; //Отменяем действие самой ссылки
});
});
})(jQuery); //Конец обвертке
</script>

Надеюсь, что это поможет Вам при создании Ваших самых серьезных проектов :) Благодарю за внимание! С уважением, Vasilenko Ivan!

Комментарии — 4 комментария

  1. #15360 Mikluha в 14:22, 4 мая 2012:

    Ответить | Цитировать

    $('html, body') в IE не пашет почему то...

  2. #18785 Snouphruh в 11:07, 26 декабря 2012:

    Ответить | Цитировать

    не признаю jQuery вообще!

    можно пример кода без использования jQuery?

  3. #18813 Дмитрий в 19:24, 20 января 2013:

    Ответить | Цитировать

    @ Snouphruh:

    если jquery не признаешь, значит на чистом js должен ументь писать все сам. А так, ты себя как школота ведешь.

  4. #20464 Дмитрий в 17:55, 18 июня 2013: (подписался)

    Ответить | Цитировать

    Всё просто и понятно, спасибо.

    К Выше сказанному в IE 9 и выше работает

Добавить комментарий

имя:

e-mail:

сайт:

текст:

Подписаться, не комментируя