Кнопка «Наверх» для сайта за 5 минут

Думаю, что ни кому не надо объяснять для чего необходима кнопка «наверх», желательно с плавной прокруткой, на вашем сайте. Вам вероятно встречались такие сайты с «длинными» страницами и без этой самой кнопки «наверх». Согласитесь, такой вариант доставляет определенные неудобства.
Для установки кнопки «наверх» с плавной прокруткой, мы не будем подключать сторонние библиотеки, ограничимся одним JS-кодом, который отлично работает. Для его установки нам потребуется 5 минут.
И так, ставим кнопку «наверх» с плавной прокруткой  к себе на сайт. Для этого нам необходимо выполнить следующие:
1. Скачать изображение с кнопкой. Как скачивать картинки, надеюсь уже знаете (кликнуть по картинке правой кнопкой мыши и выбрать «сохранить картинку как»).

2. Закинуть картинку в папку с изображениями своего сайта, обычно папка «images» .
3. Вставить код стилей перед закрывающимся тегом </head>, или в ваш файл CSS.

<style>
#upbutton {
background: url("images/up.png") no-repeat top left;
height: 60px;
width: 60px;
bottom: 30px;
right: 30px;
cursor: pointer;
display: none;
position: fixed;
z-index: 999;
}
</style>

4. Вставить следующий код перед закрывающимся тегом </body>. Или в файл footer.php если сайт работает на какой-то cms.

<script>
var JumpUp = function() {
if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
window.scrollBy(0,-50);
setTimeout(JumpUp, 40);
}
}
window.onscroll = function() {
var scrolled = window.pageYOffset || document.documentElement.scrollTop;
if (scrolled > 100) {
document.getElementById('upbutton').style.display = 'block';
} else {
document.getElementById('upbutton').style.display = 'none';
}
}
</script>
<a id="upbutton" href="#" onclick="JumpUp(); return false;">
<img src="images/up.png" alt="Top" border="none" title="Наверх">
</a>

5. Проверить в двух местах, правильно ли вы прописали путь к изображению кнопки.
В коде стилей: background: url(«images/up.png») no-repeat top left;
И в ссылке: <img src=«images/up.png» alt=»Top» border=»none» title=»Наверх»>
Скорость прокрутки страницы регулируется здесь: setTimeout(JumpUp, 40);
Чем больше число, тем медленнее прокручивается.
Да, вы можете заменить изображение кнопки на любое другое, только поменяйте имя файла изображения в коде.
Вот и все. Ваша кнопка «наверх» установлена. Можете проверить ее в действии. Надеюсь, я расписал все подробно и понятно.
Не забыли украсить свой сайт к Новому году: здесь новогодние украшения для сайта