» »

Скрипт кнопка вверх как на сайте Zornet.Ru

Скрипт кнопка вверх как на сайте Zornet.Ru

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

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

Приступаем к установке:

В нижнее часть:

Код
<!-- <Вверх> -->  
<a href="#" class="scrollup"></a>  
<script type="text/javascript">  
  $(document).ready(function(){  
  $(window).scroll(function(){  
  if ($(this).scrollTop() > 700) {  
  $('.scrollup').fadeIn();  
  } else {  
  $('.scrollup').fadeOut();  
  }  
  });  
  $('.scrollup').click(function(){  
  $("html, body").animate({ scrollTop: 0 }, 600);  
  return false;  
  });  
  });  
</script>  
<!-- </Вверх> -->


CSS:

Код
/*Knopka Verx*/
.scrollup{width:40px;height:40px;position:fixed;bottom: 185px;right:25px;display:none;text-indent:-9999px;background: url('http://zornet.ru/zorner_ru_1/ABVUSA/vverkh.png') no-repeat;opacity:0.5;}  
.scrollup:hover{opacity:0.7;border-radius: 50%;box-shadow: 0 0px 13px #393c40;}

Чтоб изменить стиль кнопки, то здесь нужен форма PNG и только после переустановки под этот формат все будет корректно смотреться.
29.07.2017 Просмотров: 523 Комментарий: (6)

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

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

Комментарий: 6
serovii104
serovii104 30.07.2017 09:281
0
Давно искал такой скрипт спасибо! Данная кнопочка отлично подошла на сайт.
Kosten
Kosten 31.07.2017 02:252
0
Но он сильно от других не отличается, только стили добавлены под эффект и поднятие страницы нормальное, так как слишком медленно не очень и также быстро, а так по середине, в самый раз подъем идет.
Critic©
Critic© 06.08.2017 19:423
0
А чем эта кнопка от других отличается, разве только скоростью?
Kosten
Kosten 06.08.2017 20:234
0
Вот как раз отличаются, что раньше все почти шли под файл и картинку, которую можно было меньше или больше сделать, на некоторый по умолчанию ставили. Здесь идут стили, что можно самому уже создать свой дизайн, но не такой, чтоб сильно, но поменять тот же цвет.
-SAM-
-SAM- 11.08.2017 04:085
0
Кому нужно, чтобы было реально визуально схоже с тем, что сейчас на zornet - вот тема, где обсуждалось, как понял: http://zornet.ru/forum/93-5458-1#33131
Kosten
Kosten 11.08.2017 04:246
0
Возможно на форуме обсуждение было, но это просто кнопка как она идет и в реале установлена.
avatar