» »

ScrollTop на JS для сайта uCoz


ScrollTop на JS для сайта uCoz

Неплохой вид scrollTop для системы uCoz. Данный scrollTop работает на JS, скрипт был адаптирован для uCoz. В scrollTop нечего лишнего. Требуется загрузить изображение на сайт. ScrollTop не шустрый сделал плавным, специально для uCoz. Все правильно поняли, кнопка вверх, которая выполнена в темной гамме гамме цвета плюс эффект при наведение на ее. И отлично подойдет на темный фон, где визуально отлично будет видна.

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

Копируем и устанавливаем в низ сайта, чтоб на всех страницах кнопка отображалась.

Код
<!--Кнопка вверх--><div class="arrow_up"></div>  
<script type="text/javascript"> $(".arrow_up").on('click',function(){$("html, body").animate({scrollTop:0},"slow");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)";  
}  
/* ---- * /


Спасибо за описание: JoniDen

От души, за то что поправил код: -SAM-
01.05.2017 Загрузок: 1 Просмотров: 365 Комментарий: (21)

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

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

Комментарий: 21
Scheme
Scheme 01.05.2017 23:341
0
Не чего кнопочка, с игрового сайта больше всего.
JoniDen
JoniDen 01.05.2017 23:474
0
Именно с игрового сайта.
Марковичь
Марковичь 01.05.2017 23:412
0
Здесь кнопку можно любую поставить, просто эта кнопка сделана необычно, тем она и отличается.
JoniDen
JoniDen 01.05.2017 23:463
0
А кто говорил про любые кнопки?
Kosten
Kosten 01.05.2017 23:535
0
Так там под ссылкой кнопки, видать можно поменять.
JoniDen
JoniDen 02.05.2017 10:228
0
Да ради Бога меняйте 09a
Kosten
Kosten 01.05.2017 23:536
0
Но дело в другом, такой дизайн соглашусь на темном фоне светло желтые линий будут видны хорошо.
tsakonter
tsakonter 02.05.2017 01:137
+1
Забрал, на фотошоп переделаю и норм.
JoniDen
JoniDen 02.05.2017 10:239
0
Рад что понравилось.
Kosten
Kosten 02.05.2017 22:1110
0
Также вы можете изменить кнопку и поставить в светло желтом оттенке, что предоставил пользователь JoniDen. Где по центру, также установлена стрелка, что на светлом виде ее не видно.



Хотя посмотрел на тестовом сайте, не чего не меняет, думал кнопка такая.
-SAM-
-SAM- 02.05.2017 22:2511
0
Стили переписал я. У кого тёмный шаблон (фон), то стили применить еще нужно такие:
Код
.arrow_up:hover {
background-color:transparent;
-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;
}
Это исходя из картинки, которая в данном материале.
Kosten
Kosten 02.05.2017 22:2712
0
Все верно, -SAM- переписал стили и сейчас кнопка вверх идет без лишних стилей.
JoniDen
JoniDen 02.05.2017 22:3213
0
В таком случае укажи рипера -SAM-. От меня тут нечего не осталось.
Kosten
Kosten 02.05.2017 22:4514
0
JoniDen, давайте начнем с того, не было бы залито, знать и материала нет, но теме, SAM отписал, в моем случай я подтвердил в комментариях. Как говорил, все мы ошибаемся, скрипт был рабочий, просто лишнее стили на нем были. Что SAM заметил и поправил.
JoniDen
JoniDen 02.05.2017 22:5215
0
Лишние стили? Да SAM наоборот увеличил их. С сайт с которого был произведен рип, такого не было. Так как тот сайт не на uCoz системе.
-SAM-
-SAM- 02.05.2017 22:5617
0
Секрет открою - CSS и HTML работают одинаково, нет смысла говорить о принадлежности этой кнопки к какой-то системе. По поводу увеличенных стилях - согласен, это сделано было для поддержки кроссбраузерности (для одинакового отображения на всех браузерах).
JoniDen
JoniDen 02.05.2017 23:0119
0
Ну значит ошибался в этом.
-SAM-
-SAM- 02.05.2017 22:5316
0
Я не рипал, а исправил стили, всё верно. По факту тут вообще рипать нечего - скрипт паблик (тут просто убрали в скрипте эффект появления по достижению отступа от верха - сейчас кнопка та всё время показывается, а не так, как на том же zornet вот сейчас стоит). Я это к тому, что этот скрипт уже выкладывали на zornet тоже, а рипать паблик - смысла нет.
Kosten
Kosten 02.05.2017 22:5718
0
Все хватит "горячие головы" решил сделать, как считаю правильным, в ЛС по этому поводу не писать, ответа не будет.
-SAM-
-SAM- 02.05.2017 23:0920
+1
В общем, вот пример того, о чём выше писал.
Kosten
Kosten 02.05.2017 23:1021
0
Но и отлично, гости и пользователи могут сразу выбрать тот оттенок, который им нужен.
avatar