图片：

html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>回到顶部</title>

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

		<script src="js/app.js"></script>

	</head>

	<body>

		<div  class="box">

                  <img   src="img/jkxy.png"/>

        </div>

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

	</body>

</html>

　　css

*{

    margin: 0;

    padding: 0;

}

.box {

    width:1000px;

    margin:  0  auto;

}

#btn {

    width:40px;

    height: 40px;

   position:fixed;

    left:50%;

    bottom:30px;

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

    margin-left: 610px;

}

#btn:hover {

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

}

　　js

indow.onload = function () {

    var topbtn = document.getElementById("btn");

    var timer = null;
    //获取屏幕的高度

    var pagelookheight = document.documentElement.clientHeight;

    window.onscroll = function(){

        //滚动超出高度，显示按钮，否则隐藏

        var backtop = document.body.scrollTop;
           //  滚动超过一频    应该显示

        if(backtop >= pagelookheight){

            topbtn.style.display = "block";

        }
      //   不显示
       else{

            topbtn.style.display = "none";

        }

    }

    topbtn.onclick = function () {
         timer = setInterval(function () {

            var backtop = document.body.scrollTop;  
              //速度操作  减速

            var speedtop = backtop/5;

            document.body.scrollTop = backtop -speedtop;  //高度不断减少

            if(backtop ==0){  //滑动到顶端

                clearInterval(timer);  //清除计时器

            }

        }, 30);

    }

}

　　效果：

HTML5 回到顶部的更多相关文章

  1. 通过js实现回到顶部功能

    许多商城网址,当我们滚动到一定高度时,我们会发现一般会出现一个回到顶部的js选项,点击轻松实现回到顶部,交互效果会显得比较人性化,且回到顶部过程中若在滚动滚动条时可以停止滚动,现在让我们来实现吧 我总 ...

  2. 【JQ+锚标记实现点击页面回到顶部】

    前言:今天想写个页面常用到的[点击回到页面顶部或是首页的功能],生活和职场一样,总会有低谷的时候,这个时候咱也别怂.别怂.别怂,说三遍!那都不是事,工作没了,再找呗,就像我上周五,团队解散那天,我是笑 ...

  3. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...

  4. 【JavaScript Demo】回到顶部功能实现

    随着网站的不断发展,需要展示的内容也越来越丰富,这导致网页上能展示的内容越来越多.当内容堆积影响了用户体验,就需考虑如何提升用户体验.在这一系列的改动中,“回到顶部”的功能成为了一个经典. 1.页面布 ...

  5. 浮动【电梯】或【回到顶部】小插件：iElevator.js

    iElevator.js 是一个jquery小插件,使用简单,兼容IE6,支持UMD和3种配置方式,比锚点更灵活. Default Options _defaults = { floors: null ...

  6. iOS tableView 滚动后回到顶部

    - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint contentOffsetPoint = self.tableView ...

  7. 页面上常用的一些小功能--QQ、回到顶部

    1.QQ <script charset="utf-8" type="text/javascript" src="http://wpa.b.qq ...

  8. JS实现回到顶部效果

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

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

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

随机推荐

  1. Ubuntu分区小知识与分区方案

    Most PC operating systems still work with an ancient disk partition scheme that historically makes d ...

  2. python3用pygame实现播放音乐文件

    import pygameimport time #导入音乐文件file = r'C:\1.wav'pygame.mixer.init()track = pygame.mixer.music.load ...

  3. JavaScript-黑科技

    单行写一个评级 var rate = 3; "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); 随机字符串 Math.random().toStrin ...

  4. linux mail 发送邮件

    1.mail -s "Title“ 123456@163.com   只有主题,没有内容 2. 有邮件内容 echo "text" | mail -s "Tit ...

  5. Linux系统重要文件（三）

    一系统运行级别文件 文件路径:/etc/inittab 文件作用说明:定义系统启动后,自动开启哪些软件程序系统 runlevel 查看当前运行级别 centos6系统运行级别: 7个级别      0 ...

  6. 阿里云HPC助力新制造 | 上汽仿真计算云SSCC

    随着上汽集团与阿里云的合作开展,阿里云各项技术逐步深入到上汽汽车研发领域的核心业务实现落地.其中上海汽车集团股份有限公司乘用车分公司(以下简称上汽乘用车)与阿里云共建的仿真计算混合云就是新制造产业升级 ...

  7. 4412 Linux定时器

    一.Linux定时器基础知识 1.1 定时器的使用范围 延后执行某个操作,定时查询某个状态:前提是对时间要求不高的地方 1.2 内核时间概念 Hz:(系统时钟通过CONFIG_HZ来设置,范围是100 ...

  8. BZOJ 4883 棋盘上的守卫 解题报告

    BZOJ4883 棋盘上的守卫 考虑费用流,但是数据范围太大 考虑 \(i\) 行 \(j\) 列如果被选择,那么要么给 \(i\) 行,要么给 \(j\) 列 把选择 \(i\) 行 \(j\) 列 ...

  9. APP测试之-网址

    App测试那么多机型怎么搞? http://www.jianshu.com/p/1a9aa2cf0d85 移动App的分类 http://www.jianshu.com/p/01f5db8958d2 ...

  10. [CSP-S模拟测试]:w（树上DP）

    题目背景 $\frac{1}{4}$遇到了一道水题,双完全不会做,于是去请教小$D$.小$D$看了${0.607}^2$眼就切掉了这题,嘲讽了$\frac{1}{4}$一番就离开了.于是,$\frac ...