文档章节

回到顶部效果---不断更新中

请叫我赵小宝
 请叫我赵小宝
发布于 2015/01/18 14:41
字数 325
阅读 58
收藏 2

更新中。。。。。。。。。。。。buging

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}	
		/*导航*/
		ul{
			position: relative;
		}
		#nav{
			width: 680px;
			height: 60px;
			background: #000000;
			margin: 0 auto;
		}
		#nav a{
			color: #787d82;
		}
		#nav a:hover{
			color: #FFF2D1;
		}
		ul li{
			list-style:none;
			float: left;
			height: 60px;
			display: block;
			line-height: 60px;
			/*background: #c3c3c3;*/

		}
		ul li a{
			text-decoration: none;
			color: #000000;
			padding: 0 15px;
			display: block;
		}
		ul li a:hover{
			background-color:#364247; 
		}


		ul li ul {
			position: absolute;	
			display: none;
		}
		ul li ul li{
			float: none;
			margin-top: 4px;
			background-color:#4D5A61; 


		}
		ul li:hover ul{display: block;}
	</style>

	<div id="nav">
		<ul>

			<li><a href="">首页</a></li>
			<li><a href="">课程大厅</a>
				<!-- 二级 -->
				<ul>
					<li><a href="">jsjsjsjsjsjs</a></li>
					<li><a href="">java</a></li>
					<li><a href="">php</a></li>
				</ul>

			</li>
			<li><a href="">学习中心</a></li>
			<li><a href="">经典案例</a></li>
			<li><a href="">关于我们</a></li>
		</ul>

	</div>


	<style type="text/css">
		.box{
			width: 680px;
			height:1000px;
			background-color: #c3c3c3;
			margin: 0 auto;

		}


		#btn{
			width:40px;
			height: 40px;
			position: fixed;
			left: 50%;
			margin-left: 350px;
			bottom: 50px;
			background-color: red;
			background: url(./images/top_bg.png) no-repeat 0 0 ;
		}
		#btn:hover{
			background: url(./images/top_bg.png) no-repeat 0 -40px;
		}

	</style>


	<div class="box"></div>
	<!-- javascript:;阻止默认行为s -->
	<a href="javascript:;" id="btn" title="回到顶部"></a>
	<script type="text/javascript">
	// 加载完页面元素执行
		window.onload=function () {
			var obtn=document.getElementById('btn');

			// 定时器
			var timer=null;
			var istop=true;
			window.oncroll=function(){
				if (!istop) {
				clearInterval(timer);
				};
				istop=false;
			}



			obtn.onclick=function  () {

				timer=setInterval(function () {
				var osTop=document.documentElement.scrollTop||document.body.scrollTop;
				var ispeed=Math.floor(osTop/5);
				document.documentElement.scrollTop=document.body.scrollTop-=ispeed;
				if (osTop==0) {
					clearInterval(timer);
				};		
				},30);


			}

		} 


		</script>
	</body>
	</html>



© 著作权归作者所有

请叫我赵小宝
粉丝 29
博文 31
码字总数 16148
作品 0
南京
私信 提问
浅谈微信小程序中的下拉刷新和上拉加载

下拉刷新和上拉加载是业务上一个很常见的需求,在微信小程序里,提供了下拉刷新的方法 。而实现上拉加载相对来说就比较不方便了。 下拉刷新 虽然微信的官方文档有很多坑,但下拉刷新介绍的还...

2018/02/05
0
0
安装完Ubuntu 15.04桌面后要做的15件事

本教程适用于在自己的电脑上安装了Ubuntu 15.04 “Vivid Vervet” 桌面的新手,这里会告诉你安装之后应该做哪些事情,来自定义你的系统和安装一些基本程序作为日常使用。 安装完Ubuntu 15.0...

openthings
2015/12/05
65
0
Android 高级面试题

Android 高级面试题及答案 阅读目录 1.如何对 Android 应用进行性能分析 2.什么情况下会导致内存泄露 3.如何避免 OOM 异常 4.Android 中如何捕获未捕获的异常 5.ANR 是什么?怎样避免和解决 ...

guozhendan
2017/03/20
0
0
jQuery 跟随浏览器窗口的回到顶部按钮

上周花了点时间改了一下 Go Top 按钮的显示效果, 显示在页面右侧, 跟随浏览器窗口滚动, 在 IE6 浏览器中使用淡入淡出的跟随显示. 可能现在已经存在很多类似的插件和工具, 但我还是想分享一下...

christina_12345
2014/03/17
664
0
Linux工具入门:make工具与Makefile文件

Linux工具入门:make工具与Makefile文件 main.o:main.c add.o:add.c add.h sub.o:sub.c sub.h gcc -Wall -g -c main.c -o main.ogcc -Wall -g -c add.c -o add.ogcc -Wall -g -c sub.c -o s......

zjy900507
2018/05/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

视频如何加水印?

很多视频制作者的视频都被他人盗用过,为了防止自己的劳动成果被他人窃取,给视频加水印对于视频制作者来说,是一件非常重要的事情。那么下面分享一个手机给视频加水印的方法,一起来看看吧!...

白米稀饭2019
16分钟前
2
0
004-Envelop-基于Blockstack的文件传输dapp

本篇文章主要介绍基于Blockstack的文件传输工具; ####A-链接地址 官网地址:https://envelop.app/ Github地址:https://github.com/envelop-app ####B-特性: 1: Share private files easil...

Riverzhou
19分钟前
5
0
SpringCloud——声明式调用Feign

Feign声明式调用 一、Feign简介 使用Ribbon和RestTemplate消费服务的时候,有一个最麻烦的点在于,每次都要拼接URL,组织参数,所以有了Feign声明式调用,Feign的首要目标是将Java HTTP客户端...

devils_os
25分钟前
5
0
《JAVA核心知识》学习笔记 (22. 数据结构)

22.1.1. 栈(stack) 栈( stack)是限制插入和删除只能在一个位置上进行的表,该位置是表的末端,叫做栈顶 (top)。它是后进先出(LIFO)的。对栈的基本操作只有 push(进栈)和 pop(出栈...

Shingfi
30分钟前
5
0
你对AJAX认知有多少(1)?

AJAX(一) AJAX技术对于前段或者后端工程师来说,都是必不可缺的 那我们这几期都来细细品味一下AJAX的相关知识,直接上干货喽~ 1、什么是AJAX,为什么要使用Ajax(请谈一下你对Ajax的认识) 什么...

理性思考
38分钟前
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部