js置顶效果

spring_007_999

于 2023-11-11 10:25:34 发布

阅读量89

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/spring_007_999/article/details/134345202

版权

一般在网页的右下角有一个按钮，点击按钮页面置顶，这里是一个demo：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.10.2.js"></script>
	</head>
<style>
	*{margin: 0;padding: 0;}
	.fixbox{
		width: 40px;
		height: 40px;
		line-height: 40px;
		background: #ddd;
		color: #999;
		font-size: 16px;
		position: fixed;
		right: 30px;
		bottom: 300px;
		text-align: center;
		cursor: pointer;
	}
	.con p{
		width: 30px;
		height: 500px;
	}
	
</style>
	<body>
		<div class="fixbox" onclick="goTop()">置顶</div>
		<div class="con">
			<p>123</p>
			<h1>我是标题1</h1>
			<p>2222</p>
			<h3>333333</h3>
			<p>aaaaaaa</p>
			<h2>22222</h2>
		</div>
		<script>
			function goTop() {
	            $('html,body').animate({ 'scrollTop': 0 }, 300);
	        }

		</script>
	</body>
</html>