» »

Стильная кнопка поднятие вверх сайта uCoz


Стильная кнопка поднятие вверх сайта 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();  
  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;line-height:48px;text-align:center;background:#1d76d9 url('http://zornet.ru/Ajaxoskrip/Fekstura_tekst/demo/0489952001463261439.png');color:#fff;position:fixed;right:30px;bottom:30px;}


Сама кнопка находится в стилях и идет одной ссылкой, просто если не устроила или по дизайн не подходит, то можете что то свое установить оригинальное.
15.05.2016 Просмотров: 533 Комментарий: (8)

Поделиться в социальных сетях

Материал разместил

Комментарий: 8
feliksteg
feliksteg 15.05.2016 01:281
0
За скрипт спасибо, как раз прозрачная кнопка есть, что на любой дизайн подойдёт, но кроме если фон не разукрашен.
FeStemBer
FeStemBer 15.05.2016 01:342
0
Но прозрачную кнопку можно любую сделать, главное чтоб в ней что то было, или стрелка по центру, чтоб хоть что то, а то так можно и эту синее поставить, не чего в ней такого не вижу, что она большая, вероятнее на синий дизайн и сайт по ширине чтоб был фиксирован и больше чем здесь.
Kosten
Kosten 15.05.2016 01:433
0
Кому нужна полу прозрачная кнопка, думаю так правильно будет, то можете здесь просто скопировать. Не помню где то на сайте ее выдрал, думал пригодится и тут как раз ее выход.

vitsavu
vitsavu 15.05.2016 07:114
0
Если чесно скрипт ни везде работет!
JoniDen
JoniDen 15.05.2016 16:335
0
Где не работает?
Kosten
Kosten 15.05.2016 17:456
0
Как понять что не везде работает, или это, к примеру на холодильнике он сам дверь не открывает.)
feliksteg
feliksteg 15.05.2016 19:128
0
Как то все обобщенно, а где именно не работает?
Сопрано
Сопрано 15.05.2016 18:437
0
В нижнее часть скрипт нужно ставить, чтоб работало на каждой странице.
avatar