<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    <title>回到顶部效果（原生js）</title>

    <style type="text/css">

        body{

            margin: 0;

        }

        .bg{

            width: 1022px;

            margin: 0 auto;

        }

        .btn{

            display: none;

            width: 75px;

            height: 75px;

            background:url(../images/网页top小图标（返回顶部）/返回顶部-085.png) no-repeat left top;

            position: fixed;

            left: 50%;

            margin-left: 530px;

            bottom: 10px;

            text-indent: -9999px;

            outline: none;

        }

        .btn:hover{

            background-position: 0 -75px;

        }

    </style>

    <script>

    var timer=null;

    var isScroll=true;

    //1.2构造oScroll函数

    function oScroll(){

        var osTop=document.documentElement.scrollTop||document.body.scrollTop;//1.1滚动高度,兼容

        var oSpeed=Math.ceil(osTop/4);//滚动速度

        document.documentElement.scrollTop=document.body.scrollTop=osTop-oSpeed;

        if(osTop==0){//判断到达顶部,清理定时器

            clearInterval(timer);

        }

        isScroll=true;

    }

    window.onload=function() {

        var obtn=document.getElementById('btn');//获取按钮元素

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

        // 1.点击返回按钮事件

        btn.onclick=function(){//为按钮绑定点击事件

            timer=setInterval(oScroll,50);

        }

        window.onscroll=function() {

            var osTop=document.documentElement.scrollTop||document.body.scrollTop;//1.1滚动高度,兼容

            if (osTop>clientHeight) {

                btn.style.display="block";

            }else{

                btn.style.display="none";

            }

            if(!isScroll){

                clearInterval(timer);

            }

            isScroll=false;

        }

    }    

    </script>

</head>

<body>

    <div class="bg">

        <img src="../images/jz.jpg">

    </div>

    <a href="javascript:void(0);" title="返回顶部" id="btn" class="btn">返回顶部</a>

</body>

</html>

javascript 特效实现(2)——回到顶部效果的更多相关文章

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

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

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

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

  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. 页面滚动事件和利用JS实现回到顶部效果

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

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

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

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

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

  8. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  9. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

随机推荐

  1. 【Win10】让 AppBarButton 支持更复杂的 Icon 内容

    最近有一个需求,需要制作这么一个 AppBarButton: 这个 AppBarButton 的 Icon 是一个评论框图标里面再显示评论数(大于 99 条则显示 99+).其中评论数是通过数据绑定得 ...

  2. [爬虫学习笔记]用于提取网页中所有链接的 Extractor 模块

            Extractor的工作是从下载的网页中将它包含的所有URL提取出来.这是个细致的工作,你需要考虑到所有可能的url的样式,比如网页中常常会包含相对路径的url,提取的时候需要将它转换 ...

  3. 【C#进阶系列】04 类型基础

    关于System.Object 所有类型都从System.Object派生而来. System.Object的公共方法中ToString()一般是返回对象的类型的全名,只有Int32这些类型将其重写后 ...

  4. sql server:compare data from two tables

    --Comparing data between two tables in SQL Server --Create two Tables-- CREATE TABLE TableA(ID Int, ...

  5. 随心所欲导出你的 UI 界面到 PDF 文件

    使用 C1PDF 控件可以导出文件到 PDF 文件,结合 .NET 平台特性你可以在任何客户端生成自定义报表.你可以打印任何 UI 界面,例如 DataGrid 导出到 PDF. 在本篇文章中我们将阐 ...

  6. 一些java的书籍

    netty in action 中文版:http://pan.baidu.com/s/1pLnEKZL spring security-3.0.1:http://pan.baidu.com/s/1bp ...

  7. 【iOS】Quartz2D图片剪切

    一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中 先把图片绘制到view上.按照原始大小,把图片绘制到一个点上. 代码: - (void)drawRect:(CGRect)rec ...

  8. 使用PHP搭建书虫网站

    年前开始了一个新项目,书虫项目的启动,项目组里面我是负责搭建网站的.以前听说过PHP的大名,就是没怎么看过,只能从一无所知开始了. 来自PHP手册的介绍:PHP, 即“PHP: Hypertext P ...

  9. LinQ实战学习笔记(四) LINQ to Object, 常用查询操作符

    这一篇介绍了下面的内容: 查询object数组 查询强类型数组 查询泛型字典 查询字符串 SelectMany 索引 Distinct操作符 排序 嵌套查询 分组 组连接 内连接 左外连接 交叉连接 ...

  10. MYSQL使用正则表达式过滤数据

    一.正则与LIKE的区别 Mysql的正则表达式仅仅使SQL语言的一个子集,可以匹配基本的字符.字符串.例如:select * from wp_posts where post_name REGEXP ...