Плавная кнопка "Наверх" на jQuery
Многие из Вас видели, что на некоторых сайтах при прокрутке окна браузера, в какой-то момент появляется кнопка "Наверх". Если по ней кликнуть, то начинается плавная промотка полосы прокрутки до самого верха. Как реализовать плавную кнопку "Наверх" через jQuery, Вы и узнаете из этой статьи.
Для начала разберёмся с HTML-кодом:
<div id="content">Контент</div>
<div id="top">Наверх</div>
Перейдём к стилям:
#content {
background-color: #ff0;
height: 3000px;
}
#top {
bottom: 0;
cursor: pointer;
display: none;
font-size: 150%;
position: fixed;
right: 0;
}
Безусловно, стили могут быть любыми. Главное, у кнопки "наверх" поставить изначально display: none; и position: fixed; с соответствующими координатами размещения, чтобы она всегда находилась в конкретном месте, независимо от положения полосы прокрутки.
И, наконец, JavaScript, в котором мы используем jQuery:
<script type="text/javascript">
var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх"
var delay = 1000; // Задержка прокрутки
$(document).ready(function() {
$(window).scroll(function () { // При прокрутке попадаем в эту функцию
/* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */
if ($(this).scrollTop() > top_show) $('#top').fadeIn();
else $('#top').fadeOut();
});
$('#top').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию
/* Плавная прокрутка наверх */
$('body, html').animate({
scrollTop: 0
}, delay);
});
});
</script>
Вот таким образом реализуется плавная прокрутка скролла на jQuery, а также плавный вывод кнопки "Наверх" при соответствующем положении скролла.
Если Вы хотите самостоятельно научиться писать подобные скрипты, то пройдите курс.
-
Создано 16.12.2013 09:28:24
-
Михаил Русаков
Комментарии (6):
Михаил я полностью учусь на ваших уроках и хочу создать сайт для местного назначения. У меня проблемы с плавной кнопкой. Если я устанавливаю ее выше самого нижнего footer то появляется просто окрашенный блок. Что писать в content и top извините начинающий программист
Ответить
Зделал кнопку такую ?
Ответить
Привет. хочу повторить такое же с плавной прокруткой но не получается. Не работает. не знаю куда надо добовлять этот текст и код. Пожалуйста прикрипите исходник страницы с такой кнопкой на верх к статье.
Ответить
а где в коде ссылка на картинку кнопки то? это не рабочий код?
Ответить
Доброго времени суток, откройте html файл (например "index.html") и в теге <head> и </head> вот такой скрипт <script type="text/javascript"> var top_show = 150; // В каком положении полосы прокрутки начинать показ кнопки "Наверх" var delay = 1000; // Задержка прокрутки $(document).ready(function() { $(window).scroll(function () { // При прокрутке попадаем в эту функцию /* В зависимости от положения полосы прокрукти и значения top_show, скрываем или открываем кнопку "Наверх" */ if ($(this).scrollTop() > top_show) $('#top').fadeIn(); else $('#top').fadeOut(); }); $('#top').click(function () { // При клике по кнопке "Наверх" попадаем в эту функцию /* Плавная прокрутка наверх */ $('body, html').animate({ scrollTop: 0 }, delay); }); }); </script> а потом после тега </footer> конечно когда вы не закрыли блок .container <div id="top"></div> и все, все станет работать!
Ответить
Здравствуйте! Вставляю ваш JavaScript в файл scroll.js, который подключен в html.(Проверяла, файл точно подключен), Но он почему-то не работает(. Может нужно что-то еще подключить?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.