Скроллер "НАВЕРХ"

[Магомед]

Здорова всем!
Зарегистрировался сегодня. Узнал о существовании это движка только недавно. Захотел поставить скроллер "наверх", но не знал, что есть плагин, да и легче установить 3 кода, чем устанавливать плагин и дорабатывать его под себя, это мое мнение.

Итак
Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>. В моем случае /oc-content/themes/osclasswizards/header.php

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>. В моем случае /oc-content/themes/osclasswizards/footer.php

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл main.css (в моем случае он находится /oc-content/themes/osclasswizards/css/main.css

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px;
color:white;background:#D8D5C2 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Вот собственно говоря и все. Я не спец в разработках, но некоторые моменты знаю. Надеюсь Вам пригодится.

 

[Магомед]

Если хотите чтобы скроллер был в правом нижнем углу допишите CSS "top" со значением 35 в моем случае, вот окончательный вариант CSS:

.b-top {
z-index:2600;
position:fixed;
left:0;
bottom:90px;
width:34%;
margin-left:50%;
opacity: 0.5;
filter:alpha(opacity=50);
}
.b-top:hover {
opacity:1;
filter:alpha(opacity=100);
cursor:pointer;}
.b-top-but {
top: 35px;
z-index:2600;
position:absolute;
display:block;
left:0px;
margin:0 0 0 100%;
padding:25px 5px 0px;
color:white;
background:#4f5773 url(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;
border-radius:5px;
}