Как сделать кнопку вверх

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

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

И в таком случае если нет данной кнопки, то это очень не удобно, особенно если на странице много контента и картинок, поэтому лучше ставить на сайт кнопку вверх, так как оно облегчит всем пользователям, проведенное время на вашем сайте.

Я приготовил для вас несколько видов кнопок, вы сможете выбрать из них себе ту, которая вам больше понравится и более подходит под ваш дизайн сайта. Итак вот представляю вам набор кнопок:

Скачать архив с этими кнопками вы сможете здесь.

Размеры вы сможете сами сделать меньше, по скольку я дал папку с размерами 128*128 или прописать размер в стилях. Давайте перейдем к установке, любой из этих кнопок. После того как вы скачали себе данный архив, распакуйте его и выберите себе одну из этих кнопок, далее нужно переименовать её и дать эй название up, пример последней картинки.

Добавить кнопку вверх

Код который вы ведите ниже, его нужно добавить в файл footer.php, этот код будет выводить вашу кнопку:

1

<div id="scrollup"></div>

В коде указана директория, где будет хранится ваша картинка, то есть кнопочка. Лучше всего создайте себе папку img и туда забросьте свою картинку, чтоб не менять ничего в коде, если вы захотите поместить в другое место картинку, то обязательно измените путь. Далее, нужно придать кнопке какой то вид, по этому идем в файл style.css и в конец прописывает данный стиль.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#scrollup {
position: fixed;
opacity: 0.8;
padding: 15px 10px 10px;
background: #aaa;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
left: 10px;
bottom: 10px;
display: none;
cursor: pointer;
left: 90%;
}

Ну и далее, осталось создать сам скрипт, подключить и закинуть его в папку. Создаем скрипт scrollup.js  и внутрь добавляем вот это:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

jQuery( document ).ready(function() {
	jQuery('#scrollup img').mouseover( function(){
		jQuery( this ).animate({opacity: 0.65},100);
	}).mouseout( function(){
		jQuery( this ).animate({opacity: 1},100);
	}).click( function(){
		window.scroll(0 ,0); 
		return false;
	});
 
	jQuery(window).scroll(function(){
		if ( jQuery(document).scrollTop() > 0 ) {
			jQuery('#scrollup').fadeIn('fast');
		} else {
			jQuery('#scrollup').fadeOut('fast');
		}
	});
});

Сохраняем ! Для тех кто не селен в этом, можете скачать уже готовый файл. Распакуете и залейте в корень вашего сайта вместе с папкой js.

А теперь просто подключаем скрипт, данный код добавьте в файл footer.php перед закрытым тегом </body>

1

<script src="/js/scrollup.js" type="text/javascript"></script>

Вот и все, у вас готовая кнопка. Ничего сложного нет, все быстро и понятно )

Если у кого то будут еще какие то вопросы, задавайте в комментариях, а также может кто то подскажет еще какой то скрипт поярче. Вообщем жду ваших отзывов и дополнений. Пока пока )

Полезные статьи

Как сделать баннер для сайта самому
Как скрыть ссылку в баннере от индексации?
Зимняя фотосессия на студии !

С уважением Евгений Смецкий