ScrollTop на JS для сайта uCoz
 | |
| Неплохой вид scrollTop для системы uCoz. Данный scrollTop работает на JS, скрипт был адаптирован для uCoz. В scrollTop нечего лишнего. Требуется загрузить изображение на сайт. ScrollTop не шустрый сделал плавным, специально для uCoz. Все правильно поняли, кнопка вверх, которая выполнена в темной гамме гамме цвета плюс эффект при наведение на ее. И отлично подойдет на темный фон, где визуально отлично будет видна. Приступаем к установке: Копируем и устанавливаем в низ сайта, чтоб на всех страницах кнопка отображалась. Код <!--Кнопка вверх--><div class="arrow_up"></div> <script type="text/javascript"> $(document).ready(function(){$(".arrow_up").hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>400){$('.arrow_up').fadeIn()}else{$('.arrow_up').fadeOut()}}); $(".arrow_up").click(function(){$("html, body").animate({scrollTop:0},"600");return false}); })}); </script><!--/Кнопка вверх--> CSS: Код /* Кнопка вверх */ .arrow_up { width:33px;height:33px;position:fixed;z-index:50;right:50px;bottom:50px;cursor:pointer; background-image:url(http://zornet.ru/Aben/Gsa/zartyn/arrow_up.png);background-color:rgba(8,8,8,0.5); -webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%; opacity:.5;-moz-opacity:.5;-khtml-opacity:.5; filter:alpha(opacity=50);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; -moz-transition:opacity .5s;-webkit-transition:opacity .5s; -o-transition:opacity .5s;-ms-transition:opacity .5s; transition:opacity .5s; } .arrow_up:hover { opacity:1;-moz-opacity:1;-khtml-opacity:1; filter:alpha(opacity=100);-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* ---- * / Еще один вариант на функцию с эффектом затухания: Код <!--Кнопка вверх--><div class="arrow_up"></div> <script type="text/javascript"> $(document).ready(function(){$(".arrow_up").hide();$(function(){$(window).scroll(function(){if($(this).scrollTop()>400){$('.arrow_up').fadeIn()}else{$('.arrow_up').fadeOut()}}); $(".arrow_up").on('click',function(){$("html, body").animate({scrollTop:0},"600");return false}); })}); </script><!--/Кнопка вверх--> Спасибо за описание: JoniDen От души, за то что поправил код: -SAM- | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 23 | |
|
| |
