Кнопка “Наверх” с плавной прокруткой

Все здравствуйте! Пользуясь случаем хочу поздравить всех с наступающим новым годом.

Сегодня хочу поделиться одной темой, она довольно не новая, но актуальная “Как сделать кнопку наверх страницы на сайте“.

Наверняка Вы видели такие кнопки на сайтах, кто-то даже поставил себе на сайт. Я видел различные реализации но все они мне не понравились по различным причинам. На днях наткнулся на один интересный и легкий скрипт реализующий создание кнопки, которая позволяет быстро и плавно перемещаться в верхнюю часть сайта одним нажатием, что очень удобно.

[spoiler name=”ВидеоурокДля открытия – нажмите“]

[/spoiler]

[spoiler name=”Необходимые данныеДля открытия – нажмите“]
1. Подключить jQuery.
Для этого вчасть нашего HTML документа вставим такой код:
[crayon lang=’php’][/crayon]

jQuery мы подключаем из библиотеки google. Если jQuery у вас уже подключен, то, естественно, подключать его не надо.

2. Подключение своего своего js кода.
Следующим шагом подключаем .js код. Делаем это создав файл .js и подключив его в header.php вставив до [plain][/plain]:
[crayon lang=”php”]
[/crayon]

в созданный файл вставляем нижеприведенным кодом:
[crayon lang=’js’](function($){
$(function(){
var e = $(“.scrollTop”);
var speed = 500;
e.click(function(){
$(“html:not(:animated)” +( !$.browser.opera ? “,body:not(:animated)” : “”)).animate({ scrollTop: 0}, 500 );
return false; //важно!
});
//появление
function show_scrollTop(){
( $(window).scrollTop()>300 ) ? e.fadeIn(600) : e.hide();
}
$(window).scroll( function(){show_scrollTop()} ); show_scrollTop();
});

})(jQuery)[/crayon]

3. Пропишем CSS стили.

Теперь, в файл (style.css) добавьте стили для кнопки:
[crayon lang=’css’]
.scrollTop{
background:url(путь_до_файла/gotop.png) 0 0 no-repeat;
display:block; width:50px; height:50px;
position:fixed; bottom:10px; right:145px;
z-index:2000;
opacity: 0.7;
}
.scrollTop:hover{ opacity: 1; }
[/crayon]

Вместо путь_до_файла/gotop.png указываем свой путь до картинки с стрелок.

Картинку со стрелкой можно взять мою или нарисовать свою собственную.

4. Вставляем HTML код стрелки в шаблон.
И последние надо вставить нашу кнопку в шаблон. В WordPress за конец страницы отвечает файл шаблона footer.php.
[crayon lang=’html’] [/crayon]

Вот и все. Так, в 4 шага можно установить кнопку “наверх”.

UPDATE: Так же есть вариант кнопки как ВКонтакте – Scroll to top без плагина для WordPress
[/spoiler]