БЛОГОДЖУМЛА - БЛОГ О ДЖУМЛА

Анимированная прокрутка к началу страницы

  • Категория: Virtuemart 1
  • Автор:
  • Просмотров: 7855

На последнем проекте http://goldnews.ru потребовалось сделать так, чтобы покупатель, просматривая список товаров (может быть 100 строк по 1 товару), имел возможность быстро вернутся к началу страницы - чтобы, например, выбрать другую категорию. Решили сделать не мгновенный переход (просто <a href="#top">), а плавную анимацию. Как это работает, можно увидеть в моём блоге - стрелка слева внизу. Будем использовать замечательный jQuery.

Сначала откроем файл со стилями нашего шаблона /templates/НАШ_ШАБЛОН/css/template.css

и добавим в самый конец стили:

 	#back-top {

	position: fixed;

	bottom: 30px;

	margin-left: 12px;

	}

	

	#back-top a {

	width: 108px;

	display: block;

	text-align: center;

	font: 11px/100% Arial, Helvetica, sans-serif;

	text-transform: uppercase;

	text-decoration: none;

	color: #bbb;

	

	 -webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

	}

	#back-top a:hover {

	color: #000;

	}

	

	 #back-top span {

	width: 108px;

	height: 108px;

	display: block;

	margin-bottom: 7px;

	background: #ddd url(up-arrow.png) no-repeat center center;

	

	 -webkit-border-radius: 15px;

	-moz-border-radius: 15px;

	border-radius: 15px;

	

	 -webkit-transition: 1s;

	-moz-transition: 1s;

	transition: 1s;

	}

	#back-top a:hover span {

	background-color: #777;

	}

Закрываем файл и сохраняем. В эту же папку кладем картинку стрелки (возьмите по ссылке).

Далее открываем index.php нашего шаблона и вначале, до <jdoc:include type="head" /> прописываем скрипты:


	<!--Подключаем jQuery-->

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

	<script type="text/javascript">

	// Устраняем конфликт между библиотеками jQuery и MooTools

	var j = jQuery.noConflict();

	j(document).ready(function(){

	

	 // Сначала скрываем стрелку

	j("#back-top").hide();

	

	 // Анимируем саму стрелку

	j(function () {

	j(window).scroll(function () {

	if (j(this).scrollTop() > 100) {

	j('#back-top').fadeIn();

	} else {

	j('#back-top').fadeOut();

	}

	});

	

	 // Плавно скролим тело сайта по клику на нашу стрелку

	j('#back-top a').click(function () {

	j('body,html').animate({

	scrollTop: 0

	}, 800);

	return false;

	});

	});

	});

	</script>






 

Далее, если у нашего тэга body нет никакого id - прописываем <body id="top">, если же у нас у body уже есть какой- то id - не будем его трогать. Пропишем после body - <span id="top"></span>

и дальше рисуем саму кнопку:


	<p id="back-top">

	<a href="#top"><span></span>Вверх</a>

	</p>

Преобразуем файл в кодировку UTF-8 без ВОМ и сохраняем.

Проверяем работоспособность...

 

(C) По материалам http://webdesignerwall.com





 

Back to top