滚动到底部案例

最新推荐文章于 2022-02-20 20:59:31 发布

yjx_43750162

最新推荐文章于 2022-02-20 20:59:31 发布

阅读量103

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/89046032

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0px;
				margin: 0px;
			}
			.wrap{
				width: 900px;
				margin-left: 50px;
			}
			.box{
				width: 900px;
				height: 300px;
				border: 1px solid darkblue;
				margin-bottom: 100px;
				background: red;
				color: rosybrown;
				font-size: 14px;
			}
			#bottom{
				margin-bottom: 0px;
			}
			.right{
				width: 90px;
				height: 235px;
				border: 1px solid rosybrown;
				position: fixed;
				top: 0px;
				right: 30px;
				bottom: 120px;
				text-align: center;
				padding-bottom: 5px;
			}
			.right p{
				cursor: pointer;
				margin-bottom:20px ;
			}
			.right p:hover{
				font-size: large;
			}
			.goto{
				position: fixed;
				bottom: 120px;
				right: 30px;
			}
			.top,.bottom{
				display: block;
				width: 70px;
				height: 50px;
				border-radius: 50%;
				margin-top: 15px;
				cursor: pointer;
			}
		</style>
		<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				$('.top').click(function(){
					$('html').animate({'scrollTop':'0'},900)
				})
				$('.bottom').click(function(){
					$('html').animate({'scrollTop':$('#bottom').offset().top},900)
				})
				$('.right p').click(function(){
					var index=$(this).index();
					$('html').animate({'scrollTop':$('div').eq(index+1).offset().top},900)
				})
			})
		</script>
	</head>
	<body>
		<div class="wrap">
			<div class="box">
				<h1>第一部分</h1>
				<p>第一部分内容如下：花费巨额看来看如果卡价格哪里看人噶看到卡人解放碑马卡洛夫你不可能比人能看房可能 </p>
			</div>
			<div class="box">
				<h1>第二部分</h1>
				<p>第二部分内容如下：你给看看了解该肉价格拉人家化工为阿尔能啊 经阿卡丽归纳激昂骄傲</p>
			</div>
			<div class="box">
				<h1>第三部分</h1>
				<p>第三部分内容如下：合法进入韩国为啊UR改回去二哈哈几个哈健康啊结果哈就但是该和你发给JKEWHGUIHSGAJB反对比姐姐好诶人的那就客人贵哦</p>
			</div>
			<div class="box">
				<h1>第四部分</h1>
				<p>第四部分内容如下：合法进入韩国为啊UR改回去二哈哈几个哈健康啊结果哈就但是该和你发给JKEWHGUIHSGAJB反对比姐姐好诶人的那就客人贵哦</p>
			</div>
			<div class="box">
				<h1>第五部分</h1>
				<p>第五部分内容如下：合法进入韩国为啊UR改回去二哈哈几个哈健康啊结果哈就但是该和你发给JKEWHGUIHSGAJB反对比姐姐好诶人的那就客人贵哦</p>
			</div>
			<div class="box" id="bottom">
				<h1>第六部分</h1>
				<p>第六部分内容如下：合法进入韩国为啊UR改回去二哈哈几个哈健康啊结果哈就但是该和你发给JKEWHGUIHSGAJB反对比姐姐好诶人的那就客人贵哦</p>
			</div>
		</div>
		<div class="right">
			<p>第一部分</p>
			<p>第二部分</p>
			<p>第三部分</p>
			<p>第四部分</p>
			<p>第五部分</p>
			<p>第六部分</p>
		</div>
		<div class="goto">
			<input type="button" value="回到顶部" class="top" />
			<input type="button" value="回到底部" class="bottom" />
		</div>
	</body>
</html>