Плавная прокрутка для сайта реализована на jQuery. Кнопка прокрутки появляется на странице, когда положение полосы прокрутки браузера достигает установленного в коде нужного значения (код приведен ниже), другими словами – кнопка появится только тогда, когда пользователь прокручивает страницу немного вниз.
Демо можно посмотреть тут или тут http://jsfiddle.net/x404/K5enj/, или промотайте эту страницу ниже.
Такая прокрутка реализуется в 3 шага:
1. Написание html-разметки кнопки.
2. Добавление css-стилей.
3. Написание javascript кода, который и отвечает за работу плавной прокрутки страницы вверх при нажатии на кнопку прокрутки.
Итак начнем:
1. HTML – разметка
Этот код лучше вставить в самом низу страницы, перед закрывающимся тегом </body>. В css для #back-top объявляем свойство position: fixed и позиционируем в правую нижнюю часть страницы. Элемент span нужен только для отображения стрелки, он не обязателен и его можно удалить, если вам не нужна графическая стрелка на кнопке.
2. CSS – разметка
#wrapper{
margin:0 auto;
width:900px;
position:relative;
}
/*Стилизация кнопки ВВЕРХ */
#back-top{
position:fixed;
bottom:30px;
left:50%;
margin-left:500px
}
#back-top a{
width:64px;
display:block;
text-align:center;
font:11px/100% Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-decoration:none;
color:#bbb;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover{color:#000;}
/* графическая стрелка ВВЕРХ */
#back-top span{
width:64px;
height:64px;
display:block;
margin-bottom:7px;
background:#ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
/* background color transition */
-webkit-transition:1s;
-moz-transition:1s;
transition:1s;
}
#back-top a:hover span{background-color:#777}
3. Javascript
Первым делом подключаем библиотеку jQuery. Для этого перед закрывающемся тегом head вставляем код:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
Далее приведен код, который можно вставить в тело страницы или вывести в отдельный javascript файл. Скрипт сравнивает положение scrollTop скроллбара окна со значением 100 (значение указано в пикселях и его можно поменять на другое), если больше 100, то кнопка плавно появляется, иначе затухает.
При клике по ссылке #back-top произойдет анимированная прокрутка body вверх к 0.
$(document).ready(function(){
// появление/затухание кнопки #back-top
$(function (){
// прячем кнопку #back-top
$("#back-top").hide();
$(window).scroll(function (){
if ($(this).scrollTop() > 100){
$("#back-top").fadeIn();
} else{
$("#back-top").fadeOut();
}
});
// при клике на ссылку плавно поднимаемся вверх
$("#back-top a").click(function (){
$("body,html").animate({
scrollTop:0
}, 800);
return false;
});
});
});Также обратите внимание на случай, если будет выключен javascript в браузере пользователя. Чтобы предусмотреть поведение стрелки и в этой ситуации необходимо к элементу body добавить id=”top”, а в ссылку к кнопке добавить якорь: <a href=”#top”>, который является id тега body. Т.е. при выключенном javascript будет происходить просто скачок в начало страницы без анимации.
Архив с исходником можно забрать тут.
Если вы столкнулись с какой-то проблемой по установке этого скрипта отпишитесь в комментариях о возникшей проблеме и ответ не заставит себя долго ждать.
Кроме этого, за отдельную плату, можете заказать установку этого скрипта на свой сайт. Для этого напишите заявку по любому из адресов, указанных на странице контактов или через форму обратной связи. Скрипт будет установлен аккуратно, без опасности повредить что-нибудь на вашем сайте!
На сайте добавлена статья “Как сделать плавную прокрутку страницы в любое место страницы”
Привет.
У меня почему-то данная кнопка появляется сразу при загрузке страницы…
Когда прокручиваешь она на мгновенье исчезает замет опять появляется…
Если нажать на нее все работает как надо, и при достижении верха страницы она как и должна пропадает..
Т.е. проблема только в том, что кнопка видима сразу при загрузке страницы, затем работает как и должна.
демо пример у вас правильно работает?
у вас почему-то не отрабатывает в javascript исчезновение кнопки при загрузке страницы:
убедитесь что id название совпадает с id, который вы указали в обработчике scroll
у меня почему то не отображается картинка и сам блок кнопки, только надпись “вверх” есть
Картинка задается в css. В данном примере она прописана в строке
"background:#ddd url(up-arrow.png) no-repeat center center;” и соответственно должна находится там же где и файл css.Спасибо за статью! Все получилось быстро и просто!
It’s a pleasure to find somoene who can think so clearly
Отлично работает! Срочно нужно было реализовать, 1 минута и готово))
Спасибо)
Привет!
У меня значок стрелки с надписью “Вверх” появляется сразу и не исчезает ни при каких обстоятельствах. Также нет медленного возвращения на верх. Также возвращает в начало именно заглавной страницы, а не той, которую просматриваю.
В чем может быть проблема?
Проверьте подключена ли у вас библиотека jQuery. Возможно у вас конфликтует jquery c другой библиотекой ( возможно mooTools). Чтобы правильней ответить, дайте адрес страницы.
Хоть убейся, но картинка стрелочки так и не появилась!
проверьте, что путь к картинке в свойстве background у вас прописан правильно.
Спасибо, очень помогло!)
Все отлично работает руки у вас кривые просто.
Все отлично поставилось, спасибо (:
Не отображается картинка почему то, хотя url прописан правильно.
Картинка задается в css. В данном примере она прописана в строке “background:#ddd url(up-arrow.png) no-repeat center center;» и соответственно должна находится там же где и файл css.
Работу в действии этого примера можно посмотреть тут – http://jsfiddle.net/x404/K5enj/
Как задать местоположение стрелки? Уменьшаю окно, а она, зараза такая, съезжает за пределы видимости.
За местоположение отвечает эта часть кода:
#back-top{
position:fixed;
bottom:30px;
left:50%; //смещение на середину экрана
margin-left:200px //смещение от середины еще на 200px
}
Можете задать нужно вам смещение кнопки. Если надо всегда у правого края держать, то вместо этих 2 строк достаточнно будет вписать свойство right: 100px – число подставляете свое, в px или %
Здравствуйте, прочитала статью, все понравилось и получилось! У меня еще один вопрос, какой код нужен, чтобы например стрелка или что то другое появлялось ни сразу, а вот например когда мы немного скатимся в низ по страничке?
Здравствуйте!
Плавное появление стрелки предусмотрено в коде. В строке
if ($(this).scrollTop() > 100){
замените цифру 100 на подходящее вам число – это расстояние в пикселях, которое пройдет страница прежде, чем появится стрелка. Чем больше число, тем дальше надо страницу промотать, чтобы появилась стрелка.
у меня почему то не отображается картинка и сам блок кнопки, только надпись «вверх» есть
Картинка задается в css. В данном примере она прописана в строке “background:#ddd url(up-arrow.png) no-repeat center center;» и соответственно должна находится там же где и файл css.
Спасибо большое! Здорово помогли ! Да и сайт клевый!
У меня всё получилось, только кнопка не плавно, а резко возвращает на верх страницы. В чём может быть проблема и как можно это исправить?
у вас что-то не правильно в javascript коде, возможно не правильный id указан