本文介绍用原生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. (转）Nutz | Nutz项目整合Spring实战

    http://blog.csdn.net/evan_leung/article/details/54767143 Nutz项目整合Spring实战 前言 Github地址 背景 实现步骤 加入spri ...

  2. 在Swift中定义属于自己的运算符

    precedencegroup ChainingPrecedence { associativity: left higherThan: TernaryPrecedence } infix opera ...

  3. nginx 服务器

    1.windows版本的nginx启动报错 No mapping for the Unicode character exists in the target multi-byte code page ...

  4. 第2节 hive基本操作：11、hive当中的分桶表以及修改表删除表数据加载数据导出等

    分桶表 将数据按照指定的字段进行分成多个桶中去,说白了就是将数据按照字段进行划分,可以将数据按照字段划分到多个文件当中去 开启hive的桶表功能 set hive.enforce.bucketing= ...

  5. 使用HTML5+调用手机摄像头和相册

    前言:前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法简 ...

  6. 「 Luogu P3137 」X 「 USACO16FEB 」 圆形谷仓

    # 题目大意 管理大大给修下 $\text{Markdown}$ 吧,严重影响做题体验啊. 这道题的意思很简单就是给你一个长度是 $n$ 的环,这个环上不均匀的分布着 $n$ 头奶牛.一头奶牛移动要花 ...

  7. LeetCode（46）Permutations

    题目 Given a collection of numbers, return all possible permutations. For example, [1,2,3] have the fo ...

  8. hihoCode #1151 : 骨牌覆盖问题·二

    #1151 : 骨牌覆盖问题·二 Time Limit:10000ms Case Time Limit:1000ms Memory Limit:256MB 描述 上一周我们研究了2xN的骨牌问题,这一 ...

  9. 九度oj 题目1068：球的半径和体积

    题目1068:球的半径和体积 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6148 解决:2269 题目描述: 输入球的中心点和球上某一点的坐标,计算球的半径和体积 输入: 球的中心点和 ...

  10. bzoj 3224 NOI2004郁闷的出纳员

    NOI2004郁闷的出纳员 2013年12月26日6,1818 输入描述 Input Description 第一行有两个非负整数n和min.n表示下面有多少条命令,min表示工资下界. 接下来的n行 ...