Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Кнопка "вверх" (Для сайта ucoz)
Кнопка "вверх"
๖ۣۜInspire
Дата: Суббота, 04.01.2014, 20:10 | Сообщение # 1
Администраторы
Сообщений:598
Награды: 2




Смотрим DEMO

Установка:

В низ сайта вставляем этот код(для светлой версии):

Код

<style>
body{
height:6000px;
margin:0;
margin-right:100px;
}
.nav{
position:fixed;
left:0;
width:95px;
top:0;
bottom:26px;
background:#efefef;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
cursor:pointer;
}
.nav:hover{
background:#dfdfdf !important;
}
.nav:active{
margin-left:-5px !important;
}
.txt {
text-align: center;
width: 95px;
margin: 16px 31px 0 0px;
color: #aaa;
font-size: 13px;
font-family: arial;
transition: all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
}
.nav:hover .txt{
color:#888;
}
.nav:hover .save{
color:#888;
}
.left{
margin-left:0px !important;
}
#save{
background:#efefef;
width:95px;
position:fixed;
bottom:0;
color: #aaa;
font-size: 13px;
font-family: arial;
text-align:center;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
padding:5px 0;
}
#save:hover{
background:#dfdfdf !important;
cursor:pointer;
color:#888;
}
#save:active{
margin-left:-5px !important;
}
.black{
opacity:0.6;
background:black !important;
}
</style>
<div class="nav"><div class="txt">Наверх</div></div><div id="save" onclick="sav()">Сохраниться</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
     if ($(window).scrollTop()>=100){
     $(".nav").css("margin-left","0");
$("#save").css("margin-left","0");
     }else{
     $(".nav").css("margin-left","-95");
$("#save").css("margin-left","-95");
     }

});

$(".nav").click(function(){
$("body").animate({scrollTop:0},300);
});

});
</script>
<script>
function sav(){
$("#save").html("Вернуться");
$("#save").attr("onclick","sav1()")
x=$(window).scrollTop();
$(".nav").addClass("left");
$("#save").addClass("left");
}
function sav1(){
$(".nav").removeClass("left");
$("#save").removeClass("left");
$("#save").html("Сохраниться");
$("#save").attr("onclick","sav()")
$("body").animate({scrollTop:x},300);
}
</script>


Для тёмной версии:

Код

<style>
body{
height:6000px;
margin:0;
margin-right:100px;
}
.nav{
position:fixed;
left:0;
width:95px;
top:0;
bottom:26px;
background:#efefef;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
cursor:pointer;
}
.nav:hover{
background:#dfdfdf !important;
}
.nav:active{
margin-left:-5px !important;
}
.txt {
text-align: center;
width: 95px;
margin: 16px 31px 0 0px;
color: #aaa;
font-size: 13px;
font-family: arial;
transition: all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
}
.nav:hover .txt{
color:#000;
}
.nav:hover .save{
color:#000;
}
.left{
margin-left:0px !important;
}
#save{
background:#efefef;
width:95px;
position:fixed;
bottom:0;
color: #aaa;
font-size: 13px;
font-family: arial;
text-align:center;
transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
padding:5px 0;
}
#save:hover{
background:#dfdfdf !important;
cursor:pointer;
color:#000;
}
#save:active{
margin-left:-5px !important;
}
.black{
opacity:0.6;
background:black !important;
}
</style>
<div class="nav black"><div class="txt">Наверх</div></div><div id="save" class="black" onclick="sav()">Сохраниться</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
     if ($(window).scrollTop()>=100){
     $(".nav").css("margin-left","0");
$("#save").css("margin-left","0");
     }else{
     $(".nav").css("margin-left","-95");
$("#save").css("margin-left","-95");
     }

});

$(".nav").click(function(){
$("body").animate({scrollTop:0},300);
});

});
</script>
<script>
function sav(){
$("#save").html("Вернуться");
$("#save").attr("onclick","sav1()")
x=$(window).scrollTop();
$(".nav").addClass("left");
$("#save").addClass("left");
}
function sav1(){
$(".nav").removeClass("left");
$("#save").removeClass("left");
$("#save").html("Сохраниться");
$("#save").attr("onclick","sav()")
$("body").animate({scrollTop:x},300);
}
</script>


У этой кнопки есть одна небольшая фича, внизу есть кнопка сохранить, она сохраняет положение и при повторном нажатии прокручивает страницу на то место где вы её сохранили
Прикрепления: 9420953.png(12Kb)




Моё портфолио
Kosten
Дата: Суббота, 04.01.2014, 21:05 | Сообщение # 2
Администраторы
Сообщений:12716
Награды: 39


Прикольно.. но я где то подобное уже видел.

Сава
Дата: Среда, 15.01.2014, 21:36 | Сообщение # 3
Проверенные
Сообщений:84
Награды: 0


vk tongue

http://unit-online.ru/?r=10489683
๖ۣۜInspire
Дата: Среда, 15.01.2014, 21:54 | Сообщение # 4
Администраторы
Сообщений:598
Награды: 2


Сава, да это он cool



Моё портфолио
Kosten
Дата: Четверг, 16.01.2014, 03:05 | Сообщение # 5
Администраторы
Сообщений:12716
Награды: 39


А разве в контакте есть такая кнопка? Мда что то не замечал. Думал Supermenыч, намутил сам, он же такой все только сам придумывает и воплощает. cool

ArtElect
Дата: Четверг, 16.01.2014, 03:55 | Сообщение # 6
Модераторы
Сообщений:395
Награды: 1


Цитата Kosten ()
Думал Supermenыч, намутил сам, он же такой все только сам придумывает и воплощает.

Kosten, Это да)) как ты мне говорил? хорошо когда есть идея?) это очередной случай))


Закон и порядок бл*ть!
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Кнопка "вверх" (Для сайта ucoz)
Страница 1 из 11
Поиск: