Web前端：常用组件3.返回顶部

最新推荐文章于 2023-03-04 15:30:18 发布

Sher_H

最新推荐文章于 2023-03-04 15:30:18 发布

阅读量496

点赞数

分类专栏： Web前端文章标签： Web前端

本文链接：https://blog.csdn.net/Sher_H/article/details/87904294

版权

Web前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

3.返回顶部

（1）拖动一定程度显示返回部件：

在这里插入图片描述
点击返回顶部：

（2）实现效果：点击后返回顶部，部件消失

（3）代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			margin:0;
		}

		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;
		}

		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
		}

		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}

		p{
			text-align:center;
			color:red;
		}

		.totop{
			width:60px;
			height:60px;
			background-color:#000;
			color:#fff;
			position:fixed;
			right:20px;
			bottom:50px;
			line-height:60px;
			text-align:center;
			font-size:40px;
			border-radius:50%;
			cursor:pointer;
			display:none;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$totop = $('.totop');

			$(window).scroll(function(){
				// 获取滚动条滚动的高度
				var iNum = $(document).scrollTop();
				if(iNum>400){
					$totop.fadeIn();
				}
				else
				{
					$totop.fadeOut();
				}

			})
			$totop.click(function(){
				$('html,body').animate({'scrollTop':0});
			})


		})

	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>

	<div class="totop">↑</div>
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	

</body>
</html>

Sher_H

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web前端：常用组件3.返回顶部

3.返回顶部（1）拖动一定程度显示返回部件：点击返回顶部： &nbsp;&nbsp;（2）实现效果：点击后返回顶部，部件消失&nbsp;&nbsp;（3）代码实现：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;
复制链接

扫一扫

专栏目录