Скрипт основанный на jQuery, взят из темы - Скрипт стрелок вверх и вниз, но выполненный в виде небольшой панельки расположенной с левой стороны экрана. При наведении мыши выдвигается панель со стрелками, при нажатии на которые вы плавно переместитесь вверх или вниз страницы.
Для начала подключаем скрипты, открываем шаблон
Если у вас уже подключена библиотека jQuery, то:
ставить не нужно.
Скорость перемещения регулируется в скрипте в двух местах значения - 800.
Первые 800 - отвечают за перемещение вниз, вторые - вверх.
Чем выше значение, тем медленнее перемещение.
Далее, открываем шаблон
Скачиваем архив со стрелками:
Распаковываем, закачиваем изображения на форум.
В тему вашего стиля, можно в самый низ, ставим:
Не забудьте заменить пути до изображений, в соответствующих полях кода.
Для начала подключаем скрипты, открываем шаблон
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>
Код: Выделить всё
<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 */
#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;
}
Комментариев нет
Комментариев пока нет, но ты можешь быть первым! Нужно лишь войти или зарегистрироваться и поделиться своим мнением.
Похожие темы
-
Не отображается боковая панель на некоторых страницах? на странице профиля, странице личных сообщений и т.д. Когда его не видно, его место должна...
-
Приветствую, а как сделать кнопку вверх как тут или ВК, но лучше как тут, только чтобы она появлялась уже при перемещении курсора влево за область...