JQUERY右側懸浮返回頂部程式碼
阿新 • • 發佈:2019-01-03
這個是用JQURY實現的一鍵置頂功能 直接複製貼上程式碼就可以用了哦~~
具體效果如下 比心♥~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery右側懸浮返回頂部程式碼</title>
</head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js" type="text/javascript"></script >
<style>
*{margin:0;padding:0;list-style:none;}
body{font-family:'MicroSoft Yahei'}
#rightButton{ position:fixed; _position:absolute; top:500px; right:0; z-index:999999; display:block;}
#backToTop{z-index:999999; display:none;}
a.backToTop_a{ background-color: skyblue; no-repeat; width:68px; height :79px; display:block; }
a.backToTop_a:active{ background-color: blue; no-repeat; }
</style>
<body>
<div style="height:1200px;">
<!--右側圖示-->
<div id="rightButton">
<ul id="right_ul">
<li><div id="backToTop"><a href="javascript:;" onfocus="this.blur();" class="backToTop_a png"></a></div></li>
</ul>
</div>
</body>
<script type="text/javascript">
$("#backToTop").on("click", function(){
var _this = $(this);
$('html,body').animate({ scrollTop: 0 }, 500 ,function(){
_this.hide();
});
});
$(window).scroll(function(){
var htmlTop = $(document).scrollTop();
if( htmlTop > 0){
$("#backToTop").fadeIn();
}else{
$("#backToTop").fadeOut();
}
});
</script>
</html>