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

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

2016-05-1468493

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

Можно, конечно, сделать якорь к верхней части, но это будет не очень хорошо. Во-первых, якорь штампует страницы, и когда пользователь в браузере нажимает кнопку для возврата, он попадает на эту же страницу. Чтобы сделать кнопку Наверх для 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;}

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

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


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (3)
Олежа Грошиков 2016-05-20 в 14:10Спам
почему когда я добовляю код в css некоторые иконки проподают а кнопки урезаются?
0
Ян Сиська 2017-01-12 в 02:24Спам
Спасибо,работает!)
0
Milodas Abracadabra 2017-02-06 в 06:27Спам
Вставить нужно конкретно вместо чегото, или как угодно ? вставить вставил а не появилось..
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите.