Кнопка прокрутки страниц для uCoz

О чем материал ?

Имея свой сайт на uCoz или uWeb, регулярно у пользователей возникает необходимость в скрипте, который добавит на сайт кнопку при нажатии на которую страницы будет автоматически прокручиваться вниз или вверх. Данная навигация очень полезная для многих сайтов, так как не все пользователи любят долго скролить колесико мыши, проще один раз нажать по кнопке на сайте и страница автоматически прокрутится в том направлении, которое выбрано.  

Как установить на сайт скрипт прокрутки страниц Вверх ?

Установка очень проста, перейдите в Панель управления сайтом - Дизайн - Управление дизайном - Глобальные блоки - Нижняя часть сайта, далее в самый низ после всего кода установить скрипт:

<a class="h-top-link" id="move_up"></a>

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

Установка стилей для кнопки Вверх

В таблицу стилей CSS пропишите новой строкой в самый низ такие стили:

.h-top-link, .h-top-link:hover {display:none;cursor:pointer;width:48px;height:48px;text-align:center;background:#1d76d9 url('https://mybloga.com/img/knopka-v.png');color:#fff;position:fixed;right:30px;bottom:30px;}

вместо ссылки, пропишите ссылку на вашу кнопку загрузив ее себе в файловый менеджер.

Скрипт прокрутки страниц вверх и вниз

Установка очень проста, перейдите в Панель управления сайтом - Дизайн - Управление дизайном - Глобальные блоки - Нижняя часть сайта, далее в самый низ после всего кода установить скрипт:

<div style= "position:fixed; right:0.1%; bottom:45%;" id="nav_up"><img src="https://mybloga.com/img/up.png" alt="В верх страницы-UP" title="В верх страницы-UP" border="0"/></div><br>
<div style= "position:fixed; right:0.1%; bottom:41%;" id="nav_down"><img src="https://mybloga.com/img/down.png" alt="В низ страницы-Down" title="В низ страницы-Down" border="0"/></div>
 
 <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()}, 2000);
 }
 );
 jQuery('#nav_up').click(
 function (e) {
 jQuery('html, body').animate({scrollTop: '0px'}, 2000);
 }
 );
 });
</script>

сохраните изменения и все должно отлично работать.

Примечание

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