14 Вересень 2013
78 396
Рубрика: уроки

Как сделать “кнопку вверх” для прокрутки сайта без плагинов

Как за 10 минут сделать кнопку “вверх” для любого сайта

Чем проще навигация на вашем сайте, тем удобнее им пользоваться. Сегодня все чаще в рунете можно встретить кнопку “подняться вверх”. Она обычно появляется в нижнем углу сайта при скролле и прячется, если страница прокручивается вверх.

Я расскажу вам, как сделать такую же кнопку за 10 минут. Неважно, на каком движке работает ваш сайт: на WordPress, Bitrix, Drupal, Joomla, UCOZ или DLE, вы можете ставить эту кнопку куда угодно, хоть на одностраничный ресурс.

Решать вопрос мы будем при помощи javascript. Я предложу вам два варианта решения: с jQuery и на простом js. Начнем с самого простого — первого.

Добавление кнопки “вверх”

Для начала добавьте в самый низ макета вашего сайта (лучше всего в footer) код кнопки:

<div id="scrollup"><img alt="Прокрутить вверх" src="/img/up.png"></div>

Загрузите кнопку, которая будет отображаться в блоке, я назвал ее up.png и загрузил в корневую папку /img/.

Найти крутые иконки и кнопки можно на www.iconfinder.com.

Теперь нужно открыть CSS-редактор и добавить стили для кнопки:

#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;
}

Далее либо добавляем js-код в уже существующий файл с остальными скриптами, либо подключаем новый:

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

Дальше нужно написать саму функцию скролла.

Вариант №1: с использованием jQuery

Если у вас уже подключена jQuery, нужно сделать следующее: в scrollup.js добавляйте такой код:

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');
		}
	});
});

Если jQuery еще не подключен, тогда перед подключением scrollup.js нужно подключить ее:

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>

Вариант №2: на простом js

Если вы любите простоту, можно обойтись простым javascript:

window.onload = function() { // после загрузки страницы

	var scrollUp = document.getElementById('scrollup'); // найти элемент

	scrollUp.onmouseover = function() { // добавить прозрачность
		scrollUp.style.opacity=0.3;
		scrollUp.style.filter  = 'alpha(opacity=30)';
	};

	scrollUp.onmouseout = function() { //убрать прозрачность
		scrollUp.style.opacity = 0.5;
		scrollUp.style.filter  = 'alpha(opacity=50)';
	};

	scrollUp.onclick = function() { //обработка клика
		window.scrollTo(0,0);
	};

// show button

	window.onscroll = function () { // при скролле показывать и прятать блок
		if ( window.pageYOffset > 0 ) {
			scrollUp.style.display = 'block';
		} else {
			scrollUp.style.display = 'none';
		}
	};
};

Посмотреть и скачать

Теперь у вас есть два способа добавить кнопку “прокрутить вверх” себе на сайт. Пример вы можете увидеть здесь:

Обновлено: добавлен WordPress-плагин для создания такой кнопки. Обсуждение на форуме в теме Плагин WP-Scrollup для кнопки “вверх”.

Тепер я хочу бачити коментарі 50