Изображение
Скрипт основанный на jQuery, взят из темы - Скрипт стрелок вверх и вниз, но выполненный в виде небольшой панельки расположенной с левой стороны экрана. При наведении мыши выдвигается панель со стрелками, при нажатии на которые вы плавно переместитесь вверх или вниз страницы.
Изображение
Для начала подключаем скрипты, открываем шаблон overall_header.html перед тегом </head> ставим:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
        jQuery(function() {
            var overelem = jQuery('body');
            
            jQuery('#nav_up').fadeIn('slow');
            jQuery('#nav_down').fadeIn('slow');  
            
            jQuery('#nav_down').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: overelem.height()}, 800);
              }
            );
            jQuery('#nav_up').click(
              function (e) {
                  jQuery('html, body').animate({scrollTop: '0px'}, 800);
              }
            );
            });
</script>
Если у вас уже подключена библиотека jQuery, то:

Код: Выделить всё

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
ставить не нужно.

Скорость перемещения регулируется в скрипте в двух местах значения - 800.
Первые 800 - отвечают за перемещение вниз, вторые - вверх.
Чем выше значение, тем медленнее перемещение.


Далее, открываем шаблон overall_footer.html, перед тегом </body> ставим:

Код: Выделить всё

<div id="nav_container">
	<div id="nav_panel" class="nav_arrow">
		<div id="nav_up" class="nav_icon" title="Вверх"></div>
		<div id="nav_down" class="nav_icon" title="Вниз"></div>
	</div>
</div>
Скачиваем архив со стрелками:
arrows-up-and-down.rar
1.2 КБ 340 скачиваний
Распаковываем, закачиваем изображения на форум.

В тему вашего стиля, можно в самый низ, ставим:

Код: Выделить всё

/* Arrows up and down */
#nav_container {
	position: fixed;
	top: 50%;
	left: 0;
	display: block;
	height: 200px;
	width: 40px;
	margin: -100px 0 0 -30px;
	padding: 0;
}
#nav_container:hover {
	margin-left: 0;
}
#nav_panel {
	height: 118px;
	width: 38px;
	margin-top: 40px;
	padding: 0;
	background-color: rgba(192, 200, 202, 0.7);
	border: 1px solid #666;
	border-left: none;
	-moz-border-radius: 0 5px 5px 0;
	-webkit-border-radius: 0 5px 5px 0;
	border-radius: 0 5px 5px 0;
}
div.nav_arrow {
	background: url("путь до изображения/arrow_state_right.png") no-repeat 26px 50% rgba(192, 200, 202, 0.7);
}
div.nav_icon {
	height: 32px;
	width: 32px;
	cursor: pointer;
	position: relative;
	opacity: .5;
}
div.nav_icon:hover {
	opacity: .7;
}
#nav_up { 
	padding: 15px 0px 12px 0px; 
	background: url("путь до изображения/arrow_up_32.png") no-repeat 0 50%;
}
#nav_down { 
	padding: 15px 0px 12px 0px; 
	background: url("путь до изображения/arrow_down_32.png") no-repeat 0 50%;
}
#nav_up:active { 
	-moz-box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
	-webkit-box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
	box-shadow: 0 -5px 7px rgba(0, 0, 0, .15) inset;
	opacity: 1;
	background-color: rgb(192, 200, 202);
}
#nav_down:active { 
	-moz-box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
	-webkit-box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
	box-shadow: 0 5px  7px rgba(0, 0, 0, .15) inset;
	opacity: 1;
	background-color: rgb(192, 200, 202);
}
#nav_container:hover div.nav_arrow {
	background-position: 100px 50% !important;
}
#nav_container:hover #nav_panel {
	width: 33px;
}
Не забудьте заменить пути до изображений, в соответствующих полях кода.
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.

Похожие темы