Demo
Letakkan di atas </b:skin>
#back-to-top{
position:fixed;
bottom:100px;
left:60px;
}
#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:80px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
#back-to-top a:hover{
color:#979797;
}
#back-to-top a span{
background:#d1d1d1;
border-radius:6px;
display:block;
height:80px;
width:80px;
background:#d1d1d1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnpAf3svZlOgznSiI3TSz37DJ4Owy1tyumbBEk_UB2OP0ZAk9qzwEvnrQDU153oX-dgMsmBySkhqBnwHje0rI2i-cTgx-gupgOSdjxaakG1hColWYMS7yt3NDmUDCii4EchqBkDXOwsw/s1600/arrow-up.pn) no-repeat center center;
margin-bottom:5px;
-moz-transition:background 1s;
-webkit-transition:background 1s;
-o-transition:background 1s;
}
#back-to-top a:hover span{
background:#979797 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQnpAf3svZlOgznSiI3TSz37DJ4Owy1tyumbBEk_UB2OP0ZAk9qzwEvnrQDU153oX-dgMsmBySkhqBnwHje0rI2i-cTgx-gupgOSdjxaakG1hColWYMS7yt3NDmUDCii4EchqBkDXOwsw/s1600/arrow-up.pn) no-repeat center center;
}
Letakkan di atas </head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#back-to-top").hide();
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500);
}
else
{
$("#back-to-top").fadeOut(1500);
}
});
//back to top
$("#back-to-top").click(function(){
$('body,html').animate({scrollTop:0},1000);
return false;
});
});
});
</script>
Letakkan di bawah <body>
<div id="back-to-top">
<a href="#top"><span></span>Back To Top</a></div>
Save
0 komentar:
Posting Komentar