JQuery 回到顶端

最新推荐文章于 2022-12-14 15:23:23 发布

东成熙就

最新推荐文章于 2022-12-14 15:23:23 发布

阅读量693

点赞数

分类专栏： Javascript HTML5 JQuery插件文章标签： JQuery 回到顶部

本文链接：https://blog.csdn.net/phpfer/article/details/49473549

版权

Javascript 同时被 3 个专栏收录

33 篇文章 1 订阅

订阅专栏

HTML5

18 篇文章 0 订阅

订阅专栏

JQuery插件

8 篇文章 0 订阅

订阅专栏

JQuery回到顶端实例

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="uft-8" />
	<!--
	<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
	-->
	<meta name="Generator" content="EditPlus®" />
	<meta name="Author" content="" />
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<title>Document</title>
	<style type="text/css">
		*{
			font-size:14px;
			font-family:"微软雅黑";
		}
		.flowdiv{
			display: table;
			background:red;
			text-align:center;
			padding: 5px;
			position: fixed;
			right: 10px;
			background:#f3f3f3;
			cursor: pointer;
			bottom: 30px;
		}
		li{
			width:50px; 
			heigth:50px;
			background:#f3f3f3;
			text-align:center;
			border:1px solid #333;
			font-weight:bold;
			list-style: none;
			padding:10px;
		}
		li:hover{
			background:#fff;
		}
	</style>
	<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(function(){
	function showScroll(){
		$(window).scroll( function(){ 
			var scrollValue=$(window).scrollTop();
			console.log(scrollValue);
			if (scrollValue > 200)
			{
				$('#toTop').css("display","block");
			} else {
				$('#toTop').css("display","none");
			}
		});	
	}
	showScroll();
	$("#toTop").click(function(){
		//缓慢效果回到顶部
		$('body,html').animate({scrollTop:0},500);
		return false;
		//直接回到顶部
		//window.scroll(0,0);
	});
})
</script>
<body>
	<div>
		head<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />+<br />foot<br />
	</div>
	<div id="" class="flowdiv">
		<li>Home</li>
		<li id='toTop' style="border-top:0;display:none">Top</li>
	</div>
</body>
</html>