• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Кнопка "вверх" (Для сайта ucoz)
Кнопка "вверх"
๖ۣۜInspire
Суббота, 04 Января 2014 | Сообщение 1
Оффлайн
Vip
Сообщений:598
Награды: 3


Смотрим 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 (12.2 Kb)




Моё портфолио
Страна: (RU)
Kosten
Суббота, 04 Января 2014 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44241
Награды: 70
Прикольно.. но я где то подобное уже видел.
Страна: (RU)
Сава
Среда, 15 Января 2014 | Сообщение 3
Оффлайн
Проверенные
Сообщений:84
Награды: 0
vk tongue

http://unit-online.ru/?r=10489683
Страна: (RU)
๖ۣۜInspire
Среда, 15 Января 2014 | Сообщение 4
Оффлайн
Vip
Сообщений:598
Награды: 3
Сава, да это он cool



Моё портфолио
Страна: (RU)
Kosten
Четверг, 16 Января 2014 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44241
Награды: 70
А разве в контакте есть такая кнопка? Мда что то не замечал. Думал Supermenыч, намутил сам, он же такой все только сам придумывает и воплощает. cool
Страна: (RU)
ArtClear
Четверг, 16 Января 2014 | Сообщение 6
Оффлайн
Vip
Сообщений:429
Награды: 1
Цитата Kosten ()
Думал Supermenыч, намутил сам, он же такой все только сам придумывает и воплощает.

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


Закон и порядок бл*ть!
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Кнопка "вверх" (Для сайта ucoz)
  • Страница 1 из 1
  • 1
Поиск: