<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>
