БлоГ

Если у вас на сайте имеются страницы с большим количеством контента, вам наверняка будет интересно данное  решение для сайта, позволяющее посетителю попадать вниз и вверх страницы одним нажатием кнопки. К тому же установить эти кнопки на сайт okis очень просто.

1. Для начала подключаем библиотеку jQuery:

Для этого копируем и вставляем следующий код в раздел Настройки > SEO > Поле для Мета тегов. Тем самым он оказывается между тегов HEAD нашего шаблона.

<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2. Подключаем скрипт кнопок:

Данный код отвечает за плавную прокрутку страницы и эффекты появления и исчезания кнопок. Копируем его и вставляем его в раздел предназначенный для размещения счетчиков (Настройки > Статистика > Другой счетчик посещаемости ). Это позволит нам разместить его как можно ближе к закрывающему тегу BODY.

<script type="text/javascript">
jQuery(function(){
 $("#Go_Top").hide().removeAttr("href");
 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow")
 $(window).scroll(function(){
 if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow")
 else $("#Go_Top").fadeIn("slow")
 });

 $("#Go_Bottom").hide().removeAttr("href");
 if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow")
 $(window).scroll(function(){
 if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow")
 else $("#Go_Bottom").fadeIn("slow")
 });

 $("#Go_Top").click(function(){
 $("html, body").animate({scrollTop:0},"slow")
 })
 $("#Go_Bottom").click(function(){
 $("html, body").animate({scrollTop:$(document).height()},"slow")
 })
});
</script>

3. Устанавливаем код кнопок:

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

<a style='position: fixed; bottom: 80px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Top'>
 <img src="http://pro-okis.ru/img/pro-okis_ru/nav_up.png" alt="Наверх" title="Наверх">
</a>
<a style='position: fixed; bottom: 20px; right: 10px; cursor:pointer; display:none;'
href='#' id='Go_Bottom'>
 <img src="http://pro-okis.ru/img/pro-okis_ru/nav_down.png" alt="Вниз" title="Вниз">
</a>

источник