У меня стоит такая вот вещица.
При наведении курсора на неё появляется такая вот панелька со стрелками вверх и вниз:
Если кому-то интересен такой вариант, то вот процедура установки:
В
overall_footer.html после
Код: Выделить всё
<!-- INCLUDEJS forum_fn.js -->
<!-- INCLUDEJS ajax.js -->
добавить
Код: Выделить всё
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Если эта библиотека подключена, то её можно не ставить.
Далее перед </body> ставится этот скрипт
Код: Выделить всё
<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>
<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>
Далее добавить в тему стиля (можно просто в конец
stylesheet.css)
Код: Выделить всё
/* 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: 36px;
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("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/arrow_state_right.png") no-repeat 26px 50% rgba(192, 200, 202, 0.7);
}
div.nav_icon {
height: 32px;
width: 23px;
cursor: pointer;
position: relative;
opacity: .5;
}
div.nav_icon:hover {
opacity: .7;
}
#nav_up {
padding: 15px 0px 12px 0px;
background: url("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/arrow_up_32.png") no-repeat 0 50%;
}
#nav_down {
padding: 15px 0px 12px 0px;
background: url("http://ССЫЛКА_НА_ВАШУ_КАРТИНКУ/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: 26px;
}
В этом коде надпись ССЫЛКА_НА_ВАШУ_КАРТИНКУ надо заменить на вашу ссылку с менеджера картинок.
Прилагаемые картинки:
Модификация эта для владельцев собственных стилей подходит. Для предустановленных не пробовал применять.