回到顶部，top图标的制作

最新推荐文章于 2023-09-16 14:43:02 发布
qq_22317389
最新推荐文章于 2023-09-16 14:43:02 发布
阅读量665
点赞数
分类专栏： HTML5 文章标签： html5
本文链接：https://blog.csdn.net/qq_22317389/article/details/80329214
版权
HTML5 专栏收录该内容
29 篇文章 1 订阅
订阅专栏
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Example</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	font-weight:200;
}
body {
	background:#27AE60;
	font-family:"Helvetica Neue", sans-serif;
}
h1{
	text-align:center;
	font-size:81px;
	color:rgba(255,255,255,1);
	margin:50px auto 30px;
	padding-bottom:30px;
	border-bottom:1px solid rgba(255,255,255,.4);
	text-transform:uppercase;
	font-weight:600;
}
h2{
	font-size:36px;
	font-weight:normal;
	color:rgba(255,255,255,.7);
	margin-bottom:30px;
	padding-bottom:20px;
	border-bottom:1px solid rgba(255,255,255,.4);
}
p{
	font-size:18px;
	color:#FFF;
	line-height:1.4;
	margin-bottom:30px;
}
#content{
	padding:10px 15%;
}
img{
	float:left;
	margin-right:20px;
	padding:20px;
	border:1px solid rgba(255,255,255,.6);
	background:rgba(255,255,255,.4);
}
img.right{
	margin-left:20px;
	margin-right:0;
	float:right;
}
#top{
	box-sizing:border-box;
	position:fixed;
	z-index:5000;
	right:50px;
	bottom:50px;
	width:60px;
	height:60px;
	background:rgba(255,255,255,.2);
	border:1px solid rgba(255,255,255,.6);
	text-align:center;
	padding-top:25px;
	color:#FFF;
	font-weight:500;
	text-transform:uppercase;
	cursor:pointer;
}
#top{
	opacity:0;
	transition:all 1s;
	-webkit-transition:all 1s;
}
#top::after{
	content:'';
	width:0;
	height:0;
	border-width:8px;
	border-style:solid;
	border-color:transparent transparent #FFF transparent;
	position:absolute;
	top:5px;
	left:50%;
	margin-left:-8px;
}
#top.show{
	opacity:1;
}
</style>
</head>

<body>
<h1>Vestibulum etante</h1>
<section id="content">
<article>
<img src="p1.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
<article>
<h2>Profile</h2>
<img src="p2.jpg" class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
<article>
<h2>Events</h2>
<img src="p3.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
<article>
<h2>Service</h2>
<img src="p4.jpg" class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
<article>
<h2>Contact</h2>
<img src="p5.jpg">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eros purus, suscipit finibus congue sit amet, fringilla eu arcu. Vestibulum pellentesque lacus vitae fermentum vulputate. Aliquam pharetra felis eu tempus imperdiet. Proin ultrices justo turpis, et fermentum sapien porttitor quis. Phasellus mauris enim, facilisis at purus vel, dignissim aliquet quam. Fusce quis nulla non tortor hendrerit congue. Cras convallis tellus a tortor malesuada placerat. Morbi et laoreet urna, id fringilla dui. Nunc a justo elit. Vivamus rhoncus, erat id aliquet tempus, leo nunc vulputate odio, quis lacinia velit felis a magna. In et arcu justo. Ut fermentum fermentum faucibus. Nulla sit amet placerat erat, eget tempor arcu. Praesent viverra nulla dictum nibh tincidunt, eget gravida elit lacinia. Aliquam semper malesuada sem eget tempus.</p>
<p>Morbi lectus ex, tempor at velit quis, consectetur suscipit ante. Etiam vehicula diam ac hendrerit tincidunt. Nullam rhoncus tellus eu urna rhoncus consectetur. Sed aliquam enim libero, pellentesque ultricies lorem sagittis eget. Duis quis nibh accumsan, tempus diam eget, posuere felis. Fusce aliquam feugiat velit, sit amet mollis felis eleifend varius. Mauris a metus vehicula, egestas nulla in, vestibulum arcu. Nam ac iaculis ex. Donec scelerisque lectus eget lectus ultrices semper. Proin in justo tristique, ultricies justo nec, faucibus dolor. Phasellus ultrices nec tortor eget aliquam. Donec a odio vel magna vestibulum vehicula. Nulla laoreet nibh urna, at pellentesque nisl iaculis a. Donec vitae purus ut nibh tristique fermentum sed non quam.</p>
</article>
</section>
<div id="top">Top</div>
<script type="text/javascript">
var nav=document.getElementById("top");
window.onscroll = function(){
    var scrollTop = document.body.scrollTop;
	//var scrollTop = document.documentElement.scrollTop;
    if(scrollTop > 200){
        nav.className = "show";
    }else{
        nav.className = "";
    }
}
nav.onclick = function(){
	document.body.scrollTop = 0;
	//document.documentElement.scrollTop
}
</script>
</body>
</html>