Стильная кнопка "Вверх" для сайтов созданных на okis

Привет всем, на написание сегодняшнего урока меня натолкнуло предложение пользователя нашего конструктора Михаила, отправленное с помощью виджета отзывов и предложений. Вот собственно сам текст предложения:

Все отлично, но предлагаю сделать темку по кнопке "вверх". вроде бы все просто, но не просто. Далеко не все работает на Okis. Было бы классно. 

Немного повозмущавшись (про себя) на утверждение что на okis работает далеко не все, я бросил все свои дела и отправился на поиски скрипта подходящего для установки на стандартный шаблон конструктора. Задача поставленная передо мной состояла из поиска скрипта кнопки "Вверх", по клику по которой посетитель сайта будет перенаправляться наверх страницы после прочтения или просмотра материалов страницы ниже 100% высоты окна браузера.

Решить поставленную задачу мне удалось крайне просто, на написание этого урока ушло гораздо больше времени чем на установку и настройку скрипта кнопки вверх. Для этого в результатах поиска в поисковой системе по запросу "Кнопка Вверх для сайта", мне стоило просмотреть несколько сайтов предлагающих варианты установки скрипта. Кое какие варианты мне не подошли по неуклюжему исполнению, что то устанавливалось при помощи плагинов для популярных СМС, эти варианты я тоже отклонил. И в итоге наткнулся на подходящий мне скрипт! Изменив настройки css предложенные вебмастером, я испытал работоспособность этого способа на тестовом сайте. Как оказалось это именно то что нужно, и вот уже готовое решения для шаблонов конструктора сайтов okis.ru я и демонстрирую вам. 

Для того чтобы установить скрипт кнопки вверх, копируйте предложенный ниже код и размещайте его в указанные места: 

Шаг 1. Начнем установку с подключения библиотеки jQuery и скрипта плавной прокрутки. Для этого перейдите в Настройки - SEO, и в поле "Мета теги" вставьте следующий код:

Шаг 2. Теперь прописываем css коды придающие кнопке стильный вид, указывающий местоположение и отношения с другими элементами на странице:

#back-top {
position: fixed;
bottom: 30px;
right: 30px;
}

#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover {
color: #000;
}

#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(/file/pro-okis_ru/up-arrow.png) no-repeat center center;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}

#back-top a:hover span {
background-color: #777;
}

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

Шаг 3. Теперь нам осталось разместить непосредственно html код кнопки, и мы делаем это копируя нижеприведенный код и размещая его на странице Настройки - Статистика в поле для размещения дополнительных счетчиков:

Изображение кнопки залито на сервер сайта pro-okis.ru и будет размещено здесь постоянно. Но если вы хотите подстраховаться вы можете перезалить кнопку на свой сайт и изменить ссылку в css коде. 

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