js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 返回顶部

div+css实现网页右侧返回顶部样式特效

发布时间:2015-09-08 23:37:51    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

div+css实现网页右侧返回顶部样式特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
	<head>    
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
		<title>div+css实现网页右侧返回顶部样式特效</title>    
		<meta name="keywords" content="jquery特效,返回顶部" />    
		<style type="text/css">    
			/* reset */    
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}    
			fieldset,img{border:0;}    
			:focus{outline:0;}    
			ol,ul{list-style:none;list-style-position:outside;}    
			table{border-collapse:collapse;border-spacing:0;}    
			address,caption,cite,code,dfn,em,i,strong,th,var,optgroup{font-style:normal;font-weight:normal;}    
			body,button,input,select,textarea{font:12px/1.5 微软雅黑,arial,sans-serif;}    
			button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-size:100%;}    
			body{color:#333;min-width: 1120px;}    
			a{color:#333;text-decoration:none;}    
			a:hover{color:#f60;text-decoration:underline;}    
			a:hover em,a:hover i,a:hover span{cursor:pointer;}    
			.cf:after{content:".";display:block;height:0;clear:both;visibility:hidden;}    
			.cf{*zoom:1;}    
			/*** guide ***/    
			.guide{width:60px;margin-left:570px;position:fixed;left:50%;bottom:134px;_position:absolute;_top:expression(documentElement.scrollTop+documentElement.clientHeight - this.clientHeight - 134+'px');display:block;}    
			.guide a{display:block;width:60px;height:50px;background:url(images/sprite_v2.png) no-repeat;margin-top:10px;text-decoration:none;font:16px/50px "Microsoft YaHei";text-align:center;color:#fff;border-radius:2px;}    
			.guide a span{display:none;text-align:center;}    
			.guide a:hover{text-decoration:none;background-color:#39F;color:#fff;}    
			.guide a:hover span{display:block;width:60px;background:#39F}    
			.guide .find{background-position:-84px -236px;}    
			.guide .report{background-position:-146px -236px;}    
			.guide .edit{background-position:-83px -185px;}    
			.guide .top{background-position:-145px -185px;}    
		</style>    
	</head>    
	<body>    
		<div style="height:1000px;"></div>    
		<div class="guide">    
			<div class="guide-wrap">    
				<a href="#" class="edit" title="发新帖"><span>发新帖</span></a>    
				<a href="#" class="find" title="找论坛"><span>找论坛</span></a>    
				<a href="#" class="report" title="反馈"><span>反馈</span></a>    
				<a href="javascript:window.scrollTo(0,0)" class="top" title="回顶部"><span>回顶部</span></a>    
			</div>    
		</div>    
	</body>    
</html>



返回顶部

jquery实现右下角浮动返回顶部并且带微信二维码特效

jquery实现带微信二维码,qq客服,联系电话的返回顶部特效

Metro扁平风格网页右侧浮动返回顶部特效代码

jQuery实现右侧悬浮在线客服、返回顶部代码

jQuery实现带二维码的返回顶部特效

jQuery仿威锋商城右侧多功能返回顶部特效

jQuery实现火箭图标返回顶部特效

纯css实现QQ音乐返回顶部和返回底部的快捷导航代码

jquery win8扁平风格返回顶部和在线客服网站侧边栏代码

jquery实现图翼网侧边带二维码的返回顶部特效

jQuery实现网页滚动显示浮动导航,并且带返回顶部按钮

div+css实现网页右侧返回顶部样式特效

jquery实现带微信二维码的返回顶部特效代码

jquery css3带微信二维码返回顶部特效代码

友荐云推荐
大家说 此评论不代表本站观点