用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. oprofile

    一.原理 在关注事件发生一定次数时,进行一次采样,记录下需要的信息(比如指令寄存器或栈寄存器信息). 二.参数 项 说明 eventname   要关注的事件名称,常用的事件名称及功能如下:   CP ...

  2. Scala 深入浅出实战经典 第52讲:Scala中路径依赖代码实战详解

    王家林亲授<DT大数据梦工厂>大数据实战视频 Scala 深入浅出实战经典(1-64讲)完整视频.PPT.代码下载:百度云盘:http://pan.baidu.com/s/1c0noOt6 ...

  3. [转载] Redis

    转载:http://snowolf.iteye.com/blog/1630697 大约一年多前,公司同事开始使用Redis,不清楚是配置,还是版本的问题,当时的Redis经常在使用一段时间后,连接爆满 ...

  4. 1.C#中几个简单的内置Attribute

    阅读目录 一:Obsolete 二:Conditional 一:Obsolete      这个内置属性是说这个方法废弃了不可用,它有两个参数,第一个参数message是说废弃的原因,第二个参数err ...

  5. 使用 jsErrLog 分析 js 报错

    1. github 地址: https://github.com/Offbeatmammal/jsErrLog/tree/master/src 2. 在所有页面引入 jsErrLog,配置出错时打日志 ...

  6. [GraphQL] Use Arguments in a GraphQL Query

    In GraphQL, every field and nested object is able to take in arguments of varying types in order to ...

  7. Unity3D常用代码总结

    1 GUI汇总 function OnGUI() { GUI.Label(Rect(1,1,100,20),"I'm a Label"); //1 GUI.Box(Rect(1,2 ...

  8. quick2.26 android下http崩溃

    quick2.26 http android下崩溃解决方案 1.先去quick官网合并代码(QuickHTTPInterface.java,CCHTTPRequestAndroid.cpp) 2.屏蔽 ...

  9. Spring3系列7- 自动扫描组件或Bean

    Spring3系列7- 自动扫描组件或Bean 一.      Spring Auto Scanning Components —— 自动扫描组件 1.      Declares Component ...

  10. 老鼠跑猫叫主人惊醒c++观察者模式实现

    这个题目算是比较经典的观察者模式了,老鼠作为一个Subject,主动发出跑的动作,紧跟着猫由于老鼠的跑而发出叫声,主人也被惊醒,在这里猫跟主人都是被动的,是观察者角色,代码实现如下: class CS ...