Кнопка вверх для сайта, как сделать кнопку наверх на сайте. Код (скрипт) кнопки вверх на Html, css и Jquery для блога WordPress

В этом небольшом посте я хочу поделиться с вами своей "стрелочкой наверх" :)

В интернете большое количество сайтов (блогов) без кнопки вверх и это очень сильно раздражает. Думаю, понятно почему. Не буду тянуть кота за хвост, а перейду сразу к делу.

На самом деле все очень просто. Вот код Html и css стили кнопки наверх, которые я использую у себя на блоге.

<a id="go_top" style="position: fixed; bottom: 10px; right: 10px; cursor: pointer; display: none;"><img title="Наверх" src="ссылка на картинку" alt="Наверх" /></a>

Размер кнопки или стрелки (кому как нравится) равен размеру картинки, которую вы хотите использовать. У меня стрелка расположена в правом нижнем углу, вы же можете сами установить свои размеры и расположение, нужно лишь чуток поправить css. У кого сайт или блог на Wordress'e - можете вставить вышеописанный код в блок footer или header.

Теперь самое важное - код (скрипт) кнопки вверх на Jquery, которые вы должны вписать в ваш файл js:

$(document).ready(function(){
$.fn.goTop=function(){ //Создаем функцию goTop()
var upT=$(this);
$(window).scroll(function(){
if($(window).scrollTop()<="300")$(upT).fadeOut("slow")
else $(upT).fadeIn("slow")});
$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})};

$(function(){$("#go_top").goTop();}); //Объявляем функцию goTop()
})

Первоначально создаем функцию goTop(), которая при скроллинге сравнивает значение scrollTop (получает/устанавливает значение отступа прокрутки сверху). Если оно меньше или равно 300, то кнопка плавно исчезает, иначе - плавно появляется.

При клике на кнопку вверх - значение scrollTop плавно переходит к 0, или проще говоря, плавно переходим вверх страницы. Далее объявляем функцию goTop() к нашей кнопке (стрелки), т.е. к тегу <a id="go_top">.

Думаю, я достаточно ясно все разжевал, но если будут вопросы - пишите в комментариях. Всем пока.