1. Подключение скрипта.
Для начала нам понадобится сам скрипт. Он написан на JavaScript и выглядит так:
function up() {
var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
if(top > 0) {
window.scrollBy(0,((top+100)/-10));
t = setTimeout('up()',20);
} else clearTimeout(t);
return false;
}
Этот скрипт плавно возвращает к верху, а в самом конце замедляется. Его можно немного настроить.
+100 - это высота на которой скрипт начинает замедлятся вверху.
-10 - это количество пикселей, которое прокручивается при движении на верх.
20 - это 0,02 секунды за которые прокручиваются те 10 пикселей что указаны как (-10)
Скрипт можно в ставить в html код, заключив его в теги:
<script type="text/javascript">...</script>
Для WordPress
Лично я не люблю засорять html код лишним, поэтому я создал папку js(в некоторых темах она есть по умолчанию.) в которой создал файл backtop.js и в него поместил код возврата.
Потом в файле footer.php перед закрывающимся
</body>
указываем путь к файлу:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/backtop.js"></script>
Если Ваш возврат будет не плавным, а резко перескакивать вверх, то нужно вставлять не в footer.php, а в header.php перед закрывающимся
</head>
2. Добавление кнопки.
В подходящее место html-кода страницы необходимо добавить такой код:
<div id="back-top"> <a href="#" onclick="return up()">ВВЕРХ</a> </div>
Для WordPress
этот код лучше поместить в файл header.php
После этого скрипт уже будет работать и его можно проверить на деле. Но для нормального отображения, нужно задать стили CSS.
2. Подключение стилей CSS.
В конец файла стилей вставить следующий код:
Для WordPress
это файл style.css
/*-----------------Возврат к верху----------------------*/
#back-top {
position: fixed;
bottom: 0px;
padding: 0px;
left: 50%;
margin-left: 500px;
z-index:99991;
}
#back-top a{
width: 77px;
height: 30px;
background: rgba(0, 0, 0, 0.25);
display:block;
text-decoration:none;
-webkit-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
-o-transition: all linear 0.2s;
transition: all linear 0.2s;
text-align: center;
}
#back-top a:hover{
height: 70px;
background: #663399;
-webkit-transition: all linear 0.2s;
-moz-transition: all linear 0.2s;
-ms-transition: all linear 0.2s;
-o-transition: all linear 0.2s;
transition: all linear 0.2s;
color: #fff;
}
После вставки и сохранения, Ваша кнопка станет как и на моем сайте - внизу справа.
Стили можете настроить как хотите, и ваша кнопка будет радовать вас и ваших посетителей.
Кнопка jQuery
(function($) {
$(function() {
$('#up').click(function() {
$('body,html').animate({scrollTop:0},500);
return false;
})
})
})(jQuery)
0 - это отступ в пикселях, до какого места возвращаться.
500 - это время, в течение которого происходит анимация (прокрутка), в данном случае это полсекунды.
Подключаем кнопу следующим кодом:
<div id="back-top"> <a href="#" id="up">ВВЕРХ</a> </div>
также нужно подключить jQuery(если она у вас подключена, то этого делать не нужно.)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Для WordPress
Подключаем все так же как и версию JavaScript выше и настраиваем стили.
На этом все. Спасибо за внимание 🙂
