回到顶部小demo

最新推荐文章于 2024-05-18 14:53:16 发布

神以灵

最新推荐文章于 2024-05-18 14:53:16 发布

阅读量196

点赞数

分类专栏：【杂记】文章标签：回到顶部

本文链接：https://blog.csdn.net/juzipidemimi/article/details/73065033

版权

【杂记】专栏收录该内容

37 篇文章 2 订阅

订阅专栏

#####一：查询知识点

这两个知识点以前就看过，又忘了，所以要多用啊~~
box-shadow:1px 1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的尺寸阴影的颜色
text-shadow:1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的颜色

####二：代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>回到顶部</title>
		<style>
			body,p,div{margin:0;padding:0;}
			#top{
				position:fixed;
				bottom:40px;
				right:55px;
				border:1px solid red;
				height:55px;
				padding:10px 5px 10px;
				text-align: center;
				border-radius: 3px;
				color:#6f7aa5;
				cursor:pointer;
			}
			#top:hover{
				box-shadow: 0 0 5px 1px red;
				text-shadow:0 0 1px #4af1ca;
			}
			#top p{
				margin-bottom: 10px;
			}
			.main{
				width:80%;
				margin:0 auto;
				white-space: pre-wrap;
			}
		</style>
	</head>
	<body>
		<div class="main">
			I'm jzx.Who you are?----------Top.
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
			I'm jzx.Who you are?
		</div>
		<div id="top">
			<p>back</p>
			<p>top</p>
		</div>
		
		<script type="text/javascript">
			window.onload = function(){
				var top = document.getElementById('top');
				top.onclick = function(){
					var scrollTop = document.body.scrollTop;
					if(scrollTop == 0){
						return ;
					}else{
						document.body.scrollTop = 0;
					};
				};
			};
		</script>
	</body>
</html>

有好的建议请在评论中指出。

神以灵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回到顶部小demo

一：查询知识点这两个知识点以前就看过，又忘了，所以要多用啊~~box-shadow:1px 1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的尺寸阴影的颜色text-shadow:1px 1px 1px red;依次为：水平阴影的位置垂直阴影的位置模糊距离阴影的颜色二：代码<!DOCTYPE html><html> <head>
复制链接

扫一扫