Кнопка Наверх для uCoz

Кнопка Наверх для uCoz

14.05.201657991DarkStar

Уделять внимание оформлению кнопки особо не будем. Вы можете сделать кнопку в виде направленной наверх стрелки, можете нарисовать ракету и т.д. Как реализовать суму функцию?

Можно, конечно, сделать якорь к верхней части, но это будет не очень хорошо. Во-первых, якорь штампует страницы, и когда пользователь в браузере нажимает кнопку для возврата, он попадает на эту же страницу. Чтобы сделать кнопку Наверх для uCoz, нам не нужны дополнительные плагины, здесь достаточно использовать маленький код на jQuery.

Скрипт обеспечивает плавный скроллинг к началу страницы. Можно сделать так, чтобы переход к началу длился пару секунд, а можно, чтобы он был мгновенным, но анимация все-таки просматривалась. Лучше установить сто миллисекунд.

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

Наверх

Особенно спросом пользуется вид кнопки наверх ВКонтакте, такой у нас уже был. Здесь же более простой вариант, в котором достаточно заменить маленькую картинку, чтобы придать уникальности

Установка

Этот код вставьте в нижнюю часть сайта:

Код
<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('http://yraaa.ru/_pu/6/36265266.png');color:#fff;position:fixed;right:30px;bottom:30px;}

Используемое изображение рекомендуем скачать на свой сайт.

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




Сохраните в социальную сеть
Комментарии (1)
почему когда я добовляю код в css некоторые иконки проподают а кнопки урезаются?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт