用Javascript实现回到顶部效果

经常看到网页中有回到顶部的效果，今天也研究一下回到顶部有哪些方法。众所周知，用锚链接是实现回到最简单的方法，但是从用户体验效果来说，并不是最好的。（锚链接回到顶部时太快了，而且用户可能在看到某个感兴趣的东西想停下来，却停不下来），针对上面的缺点，我们试着用Javascript的方法来得到实现。思路是这个样子的：

1、首先用html和css构建基本的例子，代码如下

html部分：

		<div class="box">

			<img src="1.jpg"/>

		</div>

		<a href="javascript:;" id="btn" title="回到顶部"></a>

css部分：

		.box { width: 1190px; margin: 0 auto; }

		#btn{ width: 40px; height: 40px; background-color: red; position: fixed; right: 0px; bottom: 60px; background: url(2.jpg) no-repeat left top; }

		#btn:hover{ background: url(2.jpg) no-repeat left -40px; }

在这里应该注意的是：href="javascript:;"的目的是为了阻止浏览器默认行为。

2、下面我们就可以用Javascript来控制我们的例子

　　a、首先模仿锚链接回到顶部的效果，代码如下：

window.onload  = function(){

	var obtn = document.getElementById('btn');

	obtn.onclick = function(){

		var osTop = document.documentElement.scrollTop || document.body.scrollTop;

		document.documentElement.scrollTop = document.body.scrollTop = -200;

	};

}

　　这里的效果为，鼠标每点击一次，向上移动200像素（200像素是可以变化的），然后我们发现每次都要点击觉得很麻烦，这里我们不妨为它添加一个定时器函数

　　b、添加定时器函数，代码如下：

var timer = null;//在前面声明

timer = setInterval(function(){},30);//里面接的是移动200px效果

　　在这里，我们觉得还不是那么的好，比如说“别人家”的效果距离顶部越近的时候，速度越慢；并且我们中间还有一个问题就是回到顶部之后，在想继续往下看时不会继续往下了。

　　c、清除定时器效果并控制回到顶部的速率，代码如下：

//改变回到顶部的速度

var isSpeed = Math.floor(-osTop/6)

document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;

//清除定时器效果

if(osTop == 0){

	clearInterval(timer);

}

　　到这里，我们的效果差不多完成了，但是还是不能在滚动条滚动的时候，看到感兴趣的内容停下来。

　　d、滚动条滚动即停，代码如下：

var isTop = true;//先声明

//滚动条滚动时触发

window.onscroll = function(){

	if(!isTop){

		clearInterval(timer);

	}

	isTop = false;

};

isTop = true;//添加在obtn.onclick事件的timer中

　　到这里，我们还有一点小小的地方可以改动，就是当在可视窗口中，回到顶部是不出现的，到达一定值后才出现

　　e、回到顶部的显示与隐藏，代码如下：

/*在css中添加如下代码：*/

#btn{display: none;}

//获取页面的可视窗口高度

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

/*在window.onscroll中添加如下代码，控制显示与隐藏*/

//在滚动的时候增加判断

var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错

if (osTop >= clientHeight) {

	obtn.style.display = 'block';

}else{

	obtn.style.display = 'none';

}

　　这样，回到顶部的效果就实现了，我们在看下完整的代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>Javascript 回到顶部效果</title>

		<style type="text/css">

			#btn {

				width: 40px;

				height: 40px;

				position: fixed;

				display: none;

				right: 0px;

				bottom: 30px;

				background: url(2.jpg) no-repeat left top;

			}

			#btn:hover {

				background: url(2.jpg) no-repeat 0 -40px;

			}

			.box {

				width: 1190px;

				margin: 0 auto;

			}

		</style>

	</head>

	<body>

		<div class="box">

			<img src="1.jpg" />

		</div>

		<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;

				//获取页面的可视窗口高度

				var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

				//滚动条滚动时触发

				window.onscroll = function(){

					//在滚动的时候增加判断

					var osTop = document.documentElement.scrollTop || document.body.scrollTop;//特别注意这句，忘了的话很容易出错

					if (osTop >= clientHeight) {

						obtn.style.display = 'block';

					}else{

						obtn.style.display = 'none';

					}

					if (!isTop) {

						clearInterval(timer);

					}

					isTop = false;

				};

				btn.onclick = function(){

					//设置定时器

					timer = setInterval(function(){

						//获取滚动条距离顶部的高度

						var osTop = document.documentElement.scrollTop || document.body.scrollTop;	//同时兼容了ie和Chrome浏览器

						//减小的速度

						var isSpeed = Math.floor(-osTop / 6);

						document.documentElement.scrollTop = document.body.scrollTop = osTop + isSpeed;

						//console.log( osTop + isSpeed);

						isTop = true;

						//判断，然后清除定时器

						if (osTop == 0) {

							clearInterval(timer);

						}

					},30);

				};

			}

		</script>

	</body>

</html>

　　到这里，还要小结一下，在中间我们运用的知识点：

知识点回顾：

DOM：

	1、document.getElementById()

	2、document.documentElement.scrollTop

	3、document.body.scrollTop

事件：

	1、window.onload

	2、window.onscroll

	3、obtn.onclick

定时器的使用：

	1、setInterval(function(){},30)

	2、clearInterval(timer)

用Javascript实现回到顶部效果的更多相关文章

  1. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery实现"跳到底部"，"回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. JavaScript实现回到顶部

    HTML页面使用一个a标签,href内填写JavaScript:;以阻止默认行为,在学习实例的时候添加一个大的div来充实页面. demo: <a href="javascript:; ...

  5. JavaScript实现返回顶部效果

    仿淘宝回到顶部效果 需求:当滚动条到一定位置时侧边栏固定在某个位置,再往下滑动到某一位置时显示回到顶部按钮.点击按钮后页面会动态滑到顶部,速度由快到慢向上滑. 思路: 1.页面加载完毕才能执行js代码 ...

  6. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  7. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  8. JavaScript实现网页回到顶部效果

    在浏览网页时,当我们浏览到网页底部,想要立刻回到网页顶部时,这时候一般网页会提供一个回到顶部的按钮来提升用户体验,以下代码实现了该功能 HTML代码: <p id="back-top& ...

  9. 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

随机推荐

  1. Cocos2d-x3.x塔防游戏（保卫萝卜）从零开始(二)

    一.前提: 完成前一篇的内容. 具体参考:Cocos2d-x3.x塔防游戏(保卫萝卜)从零开始(一)篇 二.本篇目标: l  说说关于cocos2dx手机分辨率适配 l  对前一篇完成的塔防游戏原型进 ...

  2. Revit中如何控制图元的显示与隐藏

    Revit建模过程中经常会遇到图元的相互遮挡的情况,为了将一些图元显示出来,就需要将一些不需要显示的图元隐藏掉,这就需要用到"隐藏/重置"工具,在Revit绘图窗口左下角提供了一排 ...

  3. GTD中定位篇

    一:为什么要定位? 每天我们的大脑涌现很多想法和要处理很多事情,如果我们没有一套流模式处理这些想法和事情,我们大脑将会处于混战忙碌中,很快就被淹没. 定位的目的: 就是有一套流模式有序的分界我们想法和 ...

  4. openCV_java Canny边缘检测

    边缘检测的原理: 检测出图像中所有灰度值变化较大的点,而且这些点连起来构成若干线条,这些线条就称之为图像的边缘. 1986年,由John F. Canny 提出! // Canny(Mat image ...

  5. Zookeeper开源客户端框架Curator简介[转]

    Curator是Netflix开源的一套ZooKeeper客户端框架. Netflix在使用ZooKeeper的过程中发现ZooKeeper自带的客户端太底层, 应用方在使用的时候需要自己处理很多事情 ...

  6. 记一次苦逼的SQL查询优化

    最近在维护公司项目时,需要加载某页面,总共加载也就4000多条数据,竟然需要35秒钟,要是数据增长到40000条,我估计好几分钟都搞不定.卧槽,要我是用户的话估计受不了,趁闲着没事,就想把它优化一下, ...

  7. node中使用domain处理异步异常问题

    domain实际上是一个隔离容器,将一个或者多个eventEmiter放入容器中,这样由该event发出的事件,如果出现异常就会最终被该domain捕获. demo代码可参见: var EventEm ...

  8. 转：windows下多线程通信方法

    多线程知识简介 同一进程中可以包含多个线程,由于进程中的多个线程可以共享进程中的资源,所以使同一进程中的多个线程之间通信相对比较简单. 当需要有多个线程来访问一个全局变量时,通常我们会在这个全局变量前 ...

  9. Github上的andoird开源组件整理

    http://blog.csdn.net/findsafety/article/details/50623627 第一部分 个性化控件(View) 主要介绍那些不错个性化的View,包括ListVie ...

  10. Gamma校正与线性工作流

    1 Gamma校正是什么?8位亮度值x(0-1)经过x^0.45的一个提亮过程. 2 为什么需要Gamma校正 人的眼睛是以非线性方式感知亮度,在自然界中,人感觉到的一半亮度其实只有全部能量的0.2, ...