本文介绍用原生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. （转）淘淘商城系列——引用dubbo服务

    http://blog.csdn.net/yerenyuan_pku/article/details/72758663 上文我们一起学习了如何发布一个dubbo服务,本文我就来教大家如何在web工程中 ...

  2. Okhttp3发送xml、json、文件的请求方法

    1.引入依赖 <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okht ...

  3. Java加密简介

    加密算法: 1.对称加密 DES   AES 2.非对称加密 RSA 3.散列函数算法加密 (单项加密)::MD5.SHA.Mac 4.数字签名算法:RSA.DSA 其中,前三种主要完成数据的加解密: ...

  4. fedora配置ip

    fedora20配置静态ip 原创 2015年08月08日 14:36:01 标签: fedora / linux / 网络配置 / ip配置 / 网络设置 2403 在linux的世界里,给主机设置 ...

  5. 使用Caliburn.Micro系列1：新建项目并引入CM

    一.WPF的几个MVVM模式实现 MVVMLight:小众的平民框架,实现简单粗暴.  pass:最近更新在15年 官网: http://www.mvvmlight.net/ 最近一篇内容全面的好文: ...

  6. ie11 突然不能加载外部css 很神奇 头部改为 <!DOCTYPE> <html>

    <!DOCTYPE html> <html> 改为 <!DOCTYPE> <html>   OK了

  7. 微信小程序---账号注册与开发工具

    (1)申请帐号 进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作. 登录 小程序后台  ...

  8. vsftp虚拟用户方式访问

    需求:外部人员需要对公司服务器上某个文件夹内容进行读写操作 文件目录信息:/opt/abc drwxr-xr-x 9 www  www       4096 12月  4 13:02 abc   #注 ...

  9. php 日常问题

    1.isset.empty.is_null的区别 isset 判断变量是否定义或者是否为空 变量存在返回ture,否则返回false 变量定义不赋值返回false unset一个变量,返回false ...

  10. mysql数据库导出导入

    MYSQL的命令行模式设置: 我的电脑->属性->高级系统设置->环境变量->系统变量-> 选择Path,在后面添加“;path\mysql\bin;”其中path为MY ...