JQUERY右侧悬浮返回顶部代码

最新推荐文章于 2023-05-09 10:42:27 发布

alokka

最新推荐文章于 2023-05-09 10:42:27 发布

阅读量1.9k

点赞数

分类专栏： JQUERY 文章标签： jquery

本文链接：https://blog.csdn.net/alokka/article/details/73609251

版权

JQUERY 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

这个是用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; }
</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"></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>

alokka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQUERY右侧悬浮返回顶部代码

这个是用JQURY实现的一键置顶功能直接复制粘贴代码就可以用了哦~~ 具体效果如下比心♥~~ <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jQuery右侧悬浮返回顶部代码</title></head><script src="http://apps.bdimg.com/libs
复制链接

扫一扫