master

分支 (1)

管理

管理

master

JqueryForDemo
/
回到顶部组件.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>回到顶部组件</title>
		<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	</head>
	<style>
		#btn_top{
			position: absolute;
			bottom: 10px;
			right: 10px;
			display: none;
			width:30px;
			height: 30px;
			line-height: 30px;
			border-radius: 5px;
			text-align: center;
			color: #ffffff;
			font-size: 16px;
		}
		.wrapper{
			width: 1200px;
			height: 1200px;
			background: black;
		}
	</style>
	<body>
		<div class="wrapper">
			1
		</div>
		<button id="btn_top">
			回到顶部
		</button>
		<script>
			$(
				function () {
					$(window).scroll(
						function(){
							if( $(window).scrollTop() >= 50 ){
								$('#btn_top').fadeIn();
							}
							else {
								$("#btn_top").fadeOut();
							}
						}
					)
				}

			);
			$('#btn_top').click(function(){
				$('html,body').animate({scrollTop: 0},500);
			})
		</script>
	</body>
</html>