您的位置：首页 > Web前端 > JQuery

JQUERY右侧悬浮返回顶部代码

2017-06-22 18:00 357 查看

这个是用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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航