demo.js

window.onload=function() {

    var timer=null;

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

    var isTop=true;

    window.onscroll=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-=osTop+ispeed;

            isTop=true;

            if(osTop==0) {

                clearInterval(timer);

            }

        },30);

    }

}

demo.css

.box {

    width:1190px;

    margin:  0  auto;

}

#btn {

    width:40px;

    height: 40px;

   position:fixed;

    left:50%;

    bottom:30px;

    background:url(顶部.png)  no-repeat  left top ;

    margin-left: 610px;

}

#btn:hover {

    background:url(顶部.png)  no-repeat  left -40px ;

}

　　demo.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>回到顶部</title>

    <link rel="stylesheet" type="text/css" href="demo.css">

    <script type="text/javascript" src="demo.js"></script>

</head>

<body>

<div  class="box">

    <img   src="背景.jpg"/>

</div>

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

</body>

</html>

 效果：

　　

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

  1. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

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

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

  3. JS实现回到顶部效果

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

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

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

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

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

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

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

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

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

  8. javascript 回到顶部 动画效果

    上代码: <!DOCTYPE html> <html> <head> <meta content="测试demo" name=" ...

  9. 纯javascript 回到 顶部 实例

    很多网站都会采用瀑布式的加载模式,像qq空间加载好友动态,为了用户体验更好,很多网站会加上回到顶部的连接,但大多数网站都是一下子就回到了顶部,当然,这样有这样的好处,但是我是个比较喜欢很炫的东西的人, ...

随机推荐

  1. c#类的定义，c#中的关健字，C#标识符

    什么是类:一种数数据结构,存储数据成员,方法成员,和其它的内容,便 于方便 谳用C#语法: class 类名{ //TODO} C#中关键字(小写)不能作为方法名,类名,命名空间名等, static ...

  2. 编辑器直接word直接上传word里的图片

    tinymce是很优秀的一款富文本编辑器,可以去官网下载.https://www.tiny.cloud 这里分享的是它官网的一个收费插件powerpaste的旧版本源码,但也不影响功能使用. http ...

  3. Spring MVC--------处理方法返回值的可选类型

    对于Spring MVC处理方法支持支持一系列的返回方式:  (1)ModelAndView (2)Model (3)ModelMap (4)Map (5)View (6)String (7)Void ...

  4. jinjia2 模板学习

    参考链接https://blog.csdn.net/langkew/article/details/51734423

  5. python使用中遇到的一些问题

    一./usr/bin/ld:cannot find -lxxx错误 例如出现了问题: /usr/bin/ld:cannot find -lssl 其中xxx表示函式库文件名称,如上面的libssl.s ...

  6. scrapy-redis源码浅析

    原文链接 前言 分析这个项目的源码原因是需要有去重过滤,增量爬取两个功能,而scrapy-redis项目已经帮我们实现了,想看看他是怎么实现的.这里只贴出部分主要代码,查看时请打开源码对照,笔记有点长 ...

  7. php基础函数，数组

    1·字符串的处理: 2·爆炸函数(explode()): 里面填两个参数把.炸掉,在abc里 炸出来的数组 粘回去(implode()): 两个参数同上 3·截取字符串(substr()) 里面放三个 ...

  8. indy idhttpserver有关下载的两个问题

    http://aawwmate.blog.163.com/blog/static/77528256201092733950315/ indy idhttpserver有关下载的两个问题 2010-10 ...

  9. 【题解】4879. 【NOIP2016提高A组集训第11场11.9】少女觉

    Description 在幽暗的地灵殿中,居住着一位少女,名为古明地觉.据说,从来没有人敢踏入过那座地灵殿,因为人们恐惧于觉一族拥有的能力——读心.掌控人心者,可控天下. 咳咳.人的记忆可以被描述为一 ...

  10. 鸟哥私房菜学习——centos 7_安装

    下面是我安装时遇到问题后搜索找到的可行办法: 准备工具: 8G左右U盘; 最新版UltraISO; CentOS7光盘镜像; CentOS7的镜像文件,可以在网易的开源镜像站或者阿里云的开源镜像站下载 ...