» »

Кнопка вверх с плавной автопрокруткой

Кнопка вверх с плавной автопрокруткой

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

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

Код
<style>  
#top{bottom:300px;cursor:pointer;display:none;font-size:150%;position:fixed;right:20px;opacity:0.7;}  
#top:hover{opacity:1;}  
</style>  
<div id="top"><img id="top_img" src="http://zornet.ru/Aben/ABGEA/FT/rynud/top.png" width="64" height="64" alt="top" /></div>  

<script type="text/javascript">  
var top_show = 250;  
var delay = 300;  
var slow_delay = 6000;  
$(window).scroll(function () {  
  if ($(this).scrollTop() > top_show) $('#top').fadeIn();  
  else $('#top').fadeOut();  
});  
$('#top').mouseover(function () {  
  $('body, html').animate({  
  scrollTop: 0  
  }, slow_delay);  
});  
$('#top').mouseout(function () {  
  $('body, html').animate().stop();  
});  
$('#top_img').click(function () {  
  $('body, html').animate().stop();  
  $('body, html').animate({  
  scrollTop: 0  
  }, delay);  
});  

$('.single-content img').parent('a').colorbox({transition:"none", width:"auto", height:"85%"});  
</script>
09.09.2017 Просмотров: 340 Комментарий: (2)

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

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

Комментарий: 2
workman
workman 13.09.2017 14:261
0
Kosten
Kosten 13.09.2017 16:182
0
Вариаций кнопок много, можно здесь круглую по цвету выбрать.
avatar