本文介绍用原生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. Mac OS 使用asio库

    下载地址:http://sourceforge.net/projects/asio/files/asio/1.12.2%20%28Stable%29/ 本人下载的版本:asio-1.12.2 1,本人 ...

  2. IDEA常见问题

    IDEA常见问提解决 一:拉取git代码认证失败(无法重新输入账户和密码) git config --system --unset credential.helper   二:取消新建文件自动添加到S ...

  3. 循环实现数组 map 方法

    //循环实现数组 map 方法 const selfMap = function (fn, context) { let arr = Array.prototype.slice.call(this) ...

  4. 小写bool和大写BOOL的区别

    转:https://blog.csdn.net/ji0525084/article/details/8594469 bool是标准C++中的布尔量,占一个字节大小内存,只有false或者true.具有 ...

  5. 指针函数(Pointer Function)和函数指针(Pointer to Function或Function Pointer)

    一.指针函数 1.解释:指针函数很好理解:简单来说,就是一个返回指针的函数,本质是一个函数.如: int fun(int x,int y);    //这是一个普通函数的声明,返回值是一个int类型, ...

  6. 常量指针(pointer to constant)和指针常量(constant pointer)

    一个指针可以操作两个实体,一个是指针值(即地址),一个是间访值(即指向的实体).于是指针的常量性也分为两种:常量指针(pointer to constant)和指针常量(constant pointe ...

  7. 洛谷——P3907 圈的异或

    P3907 圈的异或 无向图$dfs$找环,并判断边权异或和是否为0 #include<iostream> #include<cstdio> #include<algor ...

  8. configparser logging

    configparser模块 # 该模块适用于配置文件的格式与windows ini文件类似,可以包含一个或多个节(section),每个节可以有多个参数(键=值). import configpar ...

  9. nodejs的express框架创建https服务器

    一 openssl创建https私钥和证书 1.下载windows版openssl: http://slproweb.com/products/Win32OpenSSL.html Win64OpenS ...

  10. 立方体 反射 CubeMap

    立方体反射(CubeMap) 在虚拟环境中,我们需要模拟材质球反射周围的环境,立方体反射正是让材质球反射出天空盒的背景的方法之一. 原理 当我们观察物体时,物体表面足够光滑,再视线方向和物体相交的点上 ...