Прикручиваем всплывающую кнопку «наверх» для Shop-Script 3

Подобные кнопки я видел практически в любом интернет-магазине и странно, что такой простой вещью разработчики Shop-Script не озаботились. Ниже я опишу, как такую кнопку сделать самостоятельно (кто не осилит, или кому просто будет лень — она у меня лежит здесь за 5$).

Нам понадобится всего ничего — подключенная библиотека jQuery (любой версии, код довольно простой), основной файл и CSS вашего шаблона. Для начала, создаём пустой текстовый документ с расширением *.js — в нём мы будем хранить jQ-код нашей кнопки (работа, эффекты и прочие свистелки). Файл у нас будет иметь следующее содержимое:

$(function() {
	$('#toTop').hide();
	$(window).scroll(function() {
		if($(this).scrollTop() >= 160) { // указываем расстояние от шапки страницы, при котором появится кнопка
			$('#toTop').fadeIn();
			$('#toTop').click(function() {
				$(this).addClass('toTop-click');
			});
		} else {
			if($(window).scrollTop() == 0) {
				$('#toTop').removeClass('toTop-click');
			}
			$('#toTop').fadeOut();
		}
	});
	// Opera fix
	var mode = (window.opera) ? ((document.compatMode == "CSS1Compat") ? $('html') : $('body')) : $('html,body');
	$('#toTop').click(function() {
		mode.animate({scrollTop:0},800);
		return false;
	});
});

Сохраняем, отправляем на хост в любое удобное место. Правим CSS шаблона, добавляем что-то вроде

#toTop {
	position: fixed;
	right: 5%;
	bottom: 20%;
	width: 20px;
	height: 20px;
	background-color: red;
	background: color url(йа_картинко.жпг) no-repeat X Y;
}

Цвета и картинка — по вкусу. Сохраняем, и далее редактируем основной файл шаблона: сразу после тэга body, добавляем «якорь»

<div id="top"></div>

а в самом низу, перед закрывающим /body

<div><a id="toTop" href="(my_url)#top" title="Наверх"><span style="display: none;">Наверх</span></a></div>

Практически готово. Осталось подключить наш скрипт, который мы сделали в самом начале. Это лучше сделать в секции head:

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

И не забудьте залить картинку, если вы её использовали.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

13 + шесть =