Установка кнопоки вверх-вниз без плагинов. Два способа

Привет всем! В продолжении рубрики “Блог без плагинов” привожу статью по установке кнопок вверх-вниз. Зачем? Во-первых, как-то рубрика застоялась, давно туда не писал, а во-вторых, вдруг кому-то понадобиться такая штука. К тому же, привожу два способа: один довольно редкий, а другой распространенный. Есть из чего выбрать.

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

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

Но, давайте по порядку.

Способ первый

Взято сие на сайте javascript.ru — хороший сайт. Для изучающих одноимённый язык самое то.

Решение довольно оригинальное. В нем изображение кнопок состоит из одной картинки, которая автоматически режется средствами CSS.

[button-red url=»http://artabr.org/knopka-vverx-vniz» target=»_blanck» position=»left»] Демо [/button-red][button-green url=»http://goo.gl/tI7eaF» target=»_blanck» position=»»] Исходник [/button-green]

Код

Вот такой вот код. Лучше всего будет, если его добавить в отдельный файл и, сохранив его в формате .js, скопировать в файлы блога. Готовый файл можете скачать выше (только не забудьте поменять url картинки).

(function () {
	var page_up_div;
	var page_up_key;
	var page_up_nokey;
	var page_up_div_create = function () {
		page_up_div = $$i({
			create:'div',
			attribute: {},
			insert:$$().body
		}).$$('position','fixed').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('zIndex','5').$$('width','14px').$$('height','7px').$$('backgroundImage','url(ЗДЕСЬ надо указать адрес к изображению стрелок)').$$('backgroundPosition','0 0').$$('backgroundRepeat','no-repeat').$$('cursor','pointer');
	}
	
	var page_up_timer = function () {
		if(page_up_nokey) {
			if($$s.scrollpos().t>=0 && $$s.scrollpos().t< =300) { 				$$(page_up_div).$$('visibility','hidden'); 			} 			else if($$s.scrollpos().t>300 && $$s.scrollpos().t< =1000) { 				page_up_key=false; 				$$(page_up_div).$$('visibility','visible').$$('top','50px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 -7px'); 			} 			else if($$s.scrollpos().t>1000) {
				page_up_key=true;
				$$(page_up_div).$$('visibility','visible').$$('top',($$s.clientsize().h-50)+'px').$$('left',($$s.scrollpos().l+$$s.clientsize().w-67)+'px').$$('backgroundPosition','0 0');
			}
		}
	}
	
	var pos_top,z;
	var page_up_to_up_go = function () {
		if(page_up_key) {
			pos_top=pos_top-z;
			z=z+10;
			if(pos_top<0) {
				page_up_nokey=true;
				pos_top=0;
			}
			window.scrollTo(0, pos_top);
			if(pos_top>0) {
				setTimeout(function() { page_up_to_up_go(); },10);
			}
		}
		else {
			pos_top=pos_top+z;
			z=z+10;
			if(pos_top>=($$s.scrollsize().h-$$s.clientsize().h)) {
				page_up_nokey=true;
				pos_top=($$s.scrollsize().h-$$s.clientsize().h);
			}
			window.scrollTo(0, pos_top);
			if(pos_top< ($$s.scrollsize().h-$$s.clientsize().h)) { 				setTimeout(function() { page_up_to_up_go(); },10); 			} 		} 	} 	 	var page_up_to_up = function (event) { 		page_up_nokey=false; 		z=10; 		pos_top=$$s.scrollpos().t; 		setTimeout(function() { page_up_to_up_go(); },10); 	} 	 	$$r(function() { 		if(($$s.scrollsize().h-$$s.clientsize().h)>1000) {
			page_up_nokey=true;
			page_up_div_create();
			$$e.add($$(page_up_div),'click',page_up_to_up); 
			page_up_timer();
			setInterval(function() { page_up_timer(); },100);
		}
	});
})();

Установка на WordPress в несколько действий

Чтобы все работало необходимо произвести несколько действий:

Действие первое

Подключаем специальный плагин JavaScript. Идем в Панель администрирования – Внешний вид – Редактор. Находим файл header.php и вставляем перед закрывающим тегом /head такую строку

<script src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Вот как это у меня выглядит

Но в WordPress скрипты лучше подключать через файл functions.php. Вот таким образом

wp_register_script( 'scriptjava', 'http://scriptjava.net/source/scriptjava/scriptjava.js', array( 'jquery' ),null, false );
wp_enqueue_script( 'scriptjava' );

Вставьте этот небольшой код в файл functions.php в самом низу файла до значка ?>

Действие второе

Открываем файл footer.php и перед закрывающим тегом /body вставляем наш код

Опять же, лучше это делать по-другому: скачайте исходник, распакуйте его из архива и загрузите в файлы темы. Теперь осталось только подключить наш скачанный файл

wp_register_script( 'updown', get_template_directory_uri() . '/js/updown.js', array( 'jquery' ),null, false);
wp_enqueue_script( 'updown' );

Действие третье

Начинаем эквилибристику с картинками кнопок вверх и вниз.

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

Так что, картинка должна быть квадратной – это главное.

Вот, пожалуйста, вам для примера картинки размером 30х30 пикселей:

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

Действие четвертое

Теперь необходимо прописать путь к изображению. У меня сей путь выглядит так

То есть, путь должен выглядеть так:

‘url(http://ИМЯ_САЙТА/ИМЯ_КАТАЛОГА/ИМЯ_Файла)’

Способ не очень удобный сам по себе, да и еще довольно сложный для новичков. Может что-то и не получиться. Так что пиши в комментариях, посмотрим что не получается)))

Способ второй

Самый распространенный вариант в Рунете на сегодня. Взят с сайта usefulscript.ru Очень простой в установке и настройке. Да и проще он в установке — достаточно добавить небольшую функцию в файл functions.php 

function function_updown (){
echo <<<EOT
<a style='position: fixed; bottom: 60px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
<img src="http://artabr.org/wp-content/themes/great/images/up.jpg" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 1px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
<img src="http://artabr.org/wp-content/themes/great/images/down.jpg" alt="Вниз" title="Вниз">
</a>
<script type="text/javascript">
jQuery(function($){
$("#Go_Top").hide().removeAttr("href");
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});

$("#Go_Bottom").hide().removeAttr("href");
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:0},"slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()},"slow")
})
});
</script>
EOT;
}
add_action('wp_footer', 'function_updown');

Осталось только подобрать изображения для кнопок вверх-вниз, закинуть их в файлы блога и правильно прописать путь к файлам. В противном случае —  у вас загрузятся мои кнопочки.

Можно еще прикрутить эффекты при наведении на кнопку, но это уже несколько лишнее.

Вот как-то так. Выбирать вам, но мне больше второе решение нравиться:

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

Ну что ж, всем удачи!

Всегда ваш, Абрамович Артем.

P.S. Если есть вопросы, то пишите, обязательно постараюсь помочь…