<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 滑到頂端</title>
<script src="/js/jquery-ui/jquery-1.9.1.js"></script>
<style type="text/css">
#toTop {
width:100px;
padding:5px;
position:fixed; /* this is the magic */
bottom:40px; /* together with this to put the div at the bottom*/
right:30px;
cursor:pointer;
display:none;
z-index:100;
}
#toTop:hover {
opacity:0.7;
}
.backtotop{
width: 92px;
height: 58px;
background-image: url("圖檔路徑");
background-position: -500px -250px;
display: inline-block;
}
</style>
</head>
<div id="toTop" class="backtotop"></div>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});
});
</script>
2014年1月21日 星期二
jQuery 滑到頂端
訂閱：
張貼留言
(
Atom
)
沒有留言 :
張貼留言