本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能，以及在这个过程中碰到的问题。

终于实现的效果类似：http://sc2.163.com/home（注意右下角的top）

代码：

Jquery

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{height: 2000px;}

        #goTop{

            display: none;

            cursor:pointer;

            background: url("common.png") no-repeat scroll 0 -460px;

            position: fixed;

            width: 60px;

            height: 60px;

            right: 20px;

            bottom: 20px;

            text-indent: -9999px;

            z-index: 100;

        }

        #goTop:hover{

            background-position: -100px -460px;

        }

    </style>

    <script src="../jQuery/jquery-1.11.3.js"></script>

    <script>

            $(function(){

                $(window).scroll(function(){

                    var scrH=document.documentElement.scrollTop+document.body.scrollTop;

                    if(scrH>200){

                        $('#goTop').fadeIn(400);

                    }else{

                        $('#goTop').stop().fadeOut(400);

                    }

                });

                $('#goTop').click(function(){

                    $('html,body').animate({scrollTop:'0px'},200);

                });

            });

    </script>

</head>

<body>

<a id="goTop" href="javascript:">返回顶层</a>

</body>

</html>

JS 

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        body{height: 2000px;}

        #goTop{

            display: none;

            cursor:pointer;

            background:url("common.png") no-repeat scroll 0 -460px;

            position: fixed;

            width: 60px;

            height: 60px;

            right: 20px;

            bottom: 20px;

            z-index: 100;

            text-indent: -9999px;

        }

        #goTop:hover{

            background-position: -100px -460px;

        }

    </style>

</head>

<body>

<a id="goTop" title="返回顶部" href="javascript:scroll(0,0)">返回顶层</a>

</body>

</html>

<script>

    (function() {

        function $(id){

            return document.getElementById(id);

        }

        window.onscroll=function(){

            var scrH=document.documentElement.scrollTop+document.body.scrollTop;

            if(scrH>200){

                $('goTop').style.display='block';

            }else{

                $('goTop').style.display='none';

            }

        };

    }());

</script>

代码好像没啥特别好解释了。说说我碰到的问题吧。

①在IE低版本号下。不支持rgba属性~

②原生js的动画效果还不会实现，希望有人留言教下。

Js、Jquery对goTop功能的实现的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  3. Jquery.LazyLoad.js实现图片延迟加载功能

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了 ...

  4. js/jquery/html前端开发常用到代码片段

    1.IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条件注释只能用于IE5以上,IE ...

  5. JS Jquery去除数组重复元素

    js jquery去除数组中的重复元素 第一种:$.unique() 第二种: for(var i = 0,len = totalArray_line.length;i < len;i++) { ...

  6. js,jquery概念理解

    js,jquery都是一种脚本语言,编写代码,实现页面的dom操作,特效等功能. 区别: 1.jquery"写的更少,做的更多"; 2.使用jquery需要导入jquery文件. ...

  7. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

  8. jquery实现菜单功能（单击展开或者关闭）-一般应用于后台

    <!doctype html> <html> <head> <meta charset="gb2312"> <title> ...

  9. [Web][高中同学毕业分布去向网站+服务器上挂载]二、敲定思路与方向(HTML5+JS(JQuery+ECharts))

    高中同学毕业分布网站:敲定思路 一.背景 第一集:http://www.cnblogs.com/Twobox/p/8368121.html 中大体确定了自己的 大体目标.大体思路. 但是 . 在今天的 ...

随机推荐

  1. CE工具里自带的学习工具--第五关

    图解: 此时会弹出一个对话框,选择是就可以了,最终会看到:

  2. tomcat修改编码格式

    在TOMCAT中的conf文件夹下server.xml中的 <Connector中添加两个设置useBodyEncodingForURI="true" //设置POST和GE ...

  3. springboot Tomcat connector configured to listen on port 8081 failed to start.

    启动报 Tomcat connector configured to listen on port 8081 failed to start.   The port may already be in ...

  4. promise的简单使用

    var p = new Promise(function (resolve,reject) { /*setTimeout(function () { resolve('success') },3000 ...

  5. http主要请求头

    一.内容协商 1.Accept:希望服务器返回的数据格式,如下面的:text/javascript, application/javascript, application/ecmascript, a ...

  6. linux ping-测试主机之间网络的连通性

    博主推荐:更多网络测试相关命令关注 网络测试  收藏linux命令大全 ping命令用来测试主机之间网络的连通性.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问 ...

  7. centos6 文件管理

    一.文件属性 权限位: - 表示文件 d 表示目录 l 表示软连接 b 表示接口存储设备文件 c 表示串行端口设备 文件的时间属性 [root@web02 ~]# ll /etc/passwd ### ...

  8. Buffer.from()

    Buffer.from(array) array {Array} 使用一个8位字节的数组分配一个新的 Buffer. const buf = Buffer.from([0x62, 0x75, 0x66 ...

  9. HDU1024 多段最大和 DP

    题目大意: 在n个数,求不重复的m段中的数据总和的最大值 令dp[i][j]表示将前j个数分成 i 段时得到的最大值(必取到第 j 个数) 状态转移可列为 dp[i][j]=Max(dp[i][j-1 ...

  10. 从一个简单的组件化封装写优化DOM操作

    /* *缺点 * 1. 还需要我们自己手工维护dom状态,以数据的思想去思考 *2. 数据改变后,还需要我们自己手动改变dom *3. * */ class LikeButton{ construct ...