必威体育Betway必威体育官网
当前位置:首页 > IT技术

“返回顶部”的简易代码及设计理念

时间:2019-10-15 18:15:38来源:IT技术作者:seo实验室小编阅读:82次「手机版」
 

回到顶部代码

1.介绍及思路分析:

在很多公司的网站中,鼠标滚动一定高度(以150px为例)之后,会出现“返回顶部”的标签。

“返回顶部”标签被固定到窗口的指定位置,位置始终不变。

当滚动的距离高度小于指定高度后,该“返回顶部”的标签消失。

另外,“返回顶部标签”绑定点击事件,通过鼠标点击,实现文档回到顶部的效果。

2.完整代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>返回顶部</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			
			.header {
				width: 100%;
				height: 100px;
				background: gray;
				text-align: center;
				font-size: 20px;
				line-height: 100px;
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
			}
			
			.content {
				width: 100%;
				height: 1500px;
				background: blueviolet;
				text-align: center;
				font-size: 20px;
				padding-top: 100px;
			}
			
			.footer {
				width: 100%;
				height: 100px;
				background: grey;
				text-align: center;
				font-size: 20px;
				line-height: 100px;
			}
			
			.toTop {
				width: 70px;
				height: 70px;
				border-radius: 50%;
				background: greenyellow;
				text-align: center;
				line-height: 70px;
				/*返回顶部标签固定定位*/
				position: fixed;
				right: 35px;
				bottom: 35px;
				z-index: 999;
				font-size: 14px;
			}
			
			.toTop:hover {
				background: green;
				font-size: 16px;
				cursor: pointer;
				color: red;
			}
		</style>
	</head>

	<body>
		<p class="wrAPPer">
			<p class="header">顶部导航栏部分</p>
			<p class="content">
				<p>p.wrapper>(p.header+p.content+p.footer+p.toTop)快速生成代码</p>
				<p>content部分的高度大于屏幕的高度,仅仅是为了出现滚动条而已。</p>
			</p>
			<p class="footer">底部</p>
			<p class="toTop">回顶部</p>
		</p>
	</body>

</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		// 初始时,“返回顶部”标签隐藏
		$(".toTop").hide();
		$(window).scroll(function() {
			// 若滚动的高度,超出指定的高度后,“返回顶部”的标签出现。
			if($(document).scrollTop() >= 150) {
				$(".toTop").show();
			} else {
				$(".toTop").hide();
			}
		})
		// 绑定点击事件,实现返回顶部的效果
		$(".toTop").click(function() {
			$(document).scrollTop(0);
		})

	})
</script>

3.效果展示

一下分别为:滚动前、滚动后、点击“返回顶部”后的效果对比

相关阅读

document.getElementsByTagName()返回值

1. 常见问题 document.getElementsByTagName()返回值样式是[…,…,…],很多人误以为是数组,进而对它调用数组方法如sort(),但是这样

php调用纯真ip数据库,返回具体地址的方法

近期,因为项目需求,需要根据ip地址去确定位置,在网上查了很多的方法,最终都没有很理想的,还是花钱的接口得劲,可是毕竟会有不给钱就让实

executeQuery返回值如何判断是否有内容

prep = con.prepareStatement(foreignKeySql1+"000"); ResultSet rs = prep.executeQuery();     if(rs.next()){   

Android Accept-Encoding为gzip,deflate Http请求返回

最近项目中遇到这样一个坑: 某一接口的HttpUrlConnection的请求返回结果为乱码,但PC浏览器直接打开是正常的。 效果图如下: 经过查

scanf 函数的返回值

1. scanf 函数是有返回值的,它的返回值可以分成三种情况 1) 正整数,表示正确输入参数的个数。例如执行 scanf("%d %d", &a, &b)

分享到:

栏目导航

推荐阅读

热门阅读