本文介绍用原生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. VC:UI编程

    VC++中给对话框设置背景图片的方法 -----------------------------------------------------方法一(铺满窗口)------------------- ...

  2. python compare with other language

    java http://dirtsimple.org/2004/12/python-is-not-java.htmlhttp://twistedmatrix.com/users/glyph/rant/ ...

  3. 又是latch: cache buffers chains惹得祸

    前言 一大早,客户给我打电话说: xx,应用很慢,查询数据总是超时,让我看看... 根据多年DBA经验,首当其冲的肯定是去查询数据库在这段时间都在干嘛. 分析 导出awr报告分析 1). 数据库在此时 ...

  4. JavaScript关键字

    JavaScript关键字 制作人:全心全意 abstract continue finally instanceof private this boolean default float int p ...

  5. buf.indexOf()

    buf.indexOf(value[, byteOffset][, encoding]) value {String} | {Buffer} | {Number} byteOffset {Number ...

  6. 10.Spring Bean的生命周期

    Spring IOC容器可以管理Bean的生命周期,允许在Bean声明周期的特定点执行定制的任务. Spring IOC容器对Bean的生命周期进行管理的过程. 1.通过构造器或工厂方法创建Bean实 ...

  7. NYOJ-770仿射密码，乘数密码与移位密码的结合；

    仿射密码 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 ->   Link   <- 和乘数密码差不多: 加密算法:Ek(m)=(k1*m+k2)%q;gcd(k ...

  8. Codeforces Round #354 (Div. 2)-C. Vasya and String,区间dp问题，好几次cf都有这种题，看来的好好学学；

    C. Vasya and String time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. shit IE & no table `border-collapse: collapse;`

    shit IE no table border-collapse: collapse; /* IE & shit table & border-collapse: collapse; ...

  10. HDU1241&POJ2386 dfs简单题

    2道题目都差不多,就是问和相邻所有点都有相同数据相连的作为一个联通快,问有多少个连通块 因为最近对搜索题目很是畏惧,总是需要看别人代码才能上手,就先拿这两道简单的dfs题目来练练手,顺便理一理dfs的 ...