点击按钮滚动条回到顶部

最新推荐文章于 2023-04-07 20:22:14 发布

2241431065

最新推荐文章于 2023-04-07 20:22:14 发布

阅读量265

点赞数

分类专栏： Java Web

本文链接：https://blog.csdn.net/qq_40748967/article/details/119918252

版权

jQuery 图片效果滚动事件淡入淡出网页交互

关键词由CSDN通过智能技术生成

Java Web 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<html>
    <head>
	    <style>
		    div{
				height:1500px;
				width:100%;
			}
			
			img{
				position:fixed;
				right:20px;
				bottom:50px;
				cursor:pointer;
			}
		</style>
		<script src="jquery-1.11.1.min.js"></script>
	</head>
	<body>
	   <div></div>
	   <img src="img/11.jpg" />
	</body>
<script>
	$("img").hide(); //隐藏标签
	$(window).scroll(function(){
		if($(window).scrollTop()>150){
			$("img").fadeIn();  //淡入效果
		}else{
			$("img").fadeOut();  //淡出效果
		}
	})
    $("img").click(function(){
		$("html,body").animate({scrollTop:0},400);
	})
	
</script>
</html>