<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />

 <meta name="description" content="此代码内容为弹性返回顶部JS代码，属于站长常用代码，更多悬浮漂浮代码请访问懒人图库JS代码频道。" />

 <title>弹性返回顶部JS代码_懒人图库</title>

 <SCRIPT type=text/javascript src="js/scrolltop.js"></SCRIPT>

 <LINK rel=stylesheet type=text/css href="css/lrtk.css">

 </head>

 <body style="text-align:center">

 <div id="topcontrol" title="Scroll Back to Top" style="DISPLAY: none; position: fixed; bottom: 30px; left: 50%; margin-left: 491px; opacity: 1; cursor: pointer;">

 <img src="http://www.paidai.com/images/new/top.jpg" style="width:53px; height:49px"/>

 </div>

 <SCRIPT type=text/javascript>goTopEx();</SCRIPT>

 <br /><br /><br /><br /><br /><br /><br />

 <p>来源：<a href="http://www.thinkzm.com/" target="_blank">Redm赤美广告</a>　代码整理：<a href="http://www.lanrentuku.com/" target="_blank">懒人图库（西西）</a>　感谢：<a href="http://www.nifengla.com/" target="_blank">你疯啦</a></p>

 <p>＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>

 <p></p>

 <p><p>超出首屏范围，即会出现TOP按钮，否则自动隐藏。<br />

 &nbsp;</p></p>

 <p></p>

 </body>

 </html>
// JavaScript Document

var goTopEx=function (){
    var obj=document.getElementById("topcontrol");

    function addEvent(obj,type,fn){
    if(obj.attachEvent){
        obj.attachEvent('on'+type,function(){
            fn.call(obj);
        })
    }else{
        obj.addEventListener(type,fn,false);
    }
}

function getScrollTop(){
                return document.documentElement.scrollTop||document.body.scrollTop;
            }

function setScrollTop(value){
                if(document.documentElement.scrollTop){
                    document.documentElement.scrollTop=value;
                }else if(document.body.scrollTop){
                    document.body.scrollTop=value;
                }
            } 

        addEvent(window,'scroll',function(){
            getScrollTop()>0?obj.style.display="":obj.style.display="none";
        });
        addEvent(obj,'click',function(){
            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);
                }
        });  
       // window.onscroll=function(){getScrollTop()>0?obj.style.display="":obj.style.display="none";}
       /*obj.onclick=function(){
            var goTop=setInterval(scrollMove,10);
            function scrollMove(){
                    setScrollTop(getScrollTop()/1.1);
                    if(getScrollTop()<1)clearInterval(goTop);
                }
        }*/
       
        
    }

实现返回top功能，window.onscroll影响到前面滚动功能，使用事件处理addEvent添加事件处理，或用jquery的ready事件，$(window).ready(fn); ready事件可以同时注册多个，执行时，按照注册的先后顺序执行,可能还有其他办法，目前就知道这两种。

实现返回top功能的更多相关文章

  1. App开发流程之右滑返回手势功能续

    上一篇记录了利用系统私有变量和方法实现右滑返回手势功能:http://www.cnblogs.com/ALongWay/p/5893515.html 这篇继续记录另一种方案:利用UINavigatio ...

  2. App开发流程之右滑返回手势功能

    iOS7以后,导航控制器,自带了从屏幕左边缘右滑返回的手势功能. 但是,如果自定义了导航栏返回按钮,这项功能就失效了,需要自行实现.又如果需要修改手势触发范围,还是需要自行实现. 广泛应用的一种实现方 ...

  3. 使用Javascript实现返回顶部功能。

    为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间. 下 ...

  4. SQLite实现Top功能

    SQlite本身没有top功能,无法向TSQL一样下Select top 100 * from tb_table,但SQLite提供了一个Limit关键字用来取得相应行数的资料 具体语法实例:Sele ...

  5. 转载：jQuery实现返回顶部功能

    转自:http://blog.csdn.net/itmyhome1990/article/details/25340705 整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图   ...

  6. jQuery实现返回顶部功能

    整理两个实现功能,一个是右下角的返回顶部,一个是右侧的返回顶部,分别如图               第一种实现 一.JSP或HTML(主体结构) 在body中添加 <body id=" ...

  7. 前端 css+js实现返回顶部功能

    描述: 本文主要是讲,通过css+js实现网页中的[返回顶部]功能. 实现代码: HTML: <div> <button onclick="returnTop()" ...

  8. js实现返回顶部功能的解决方案

    很多网站上都有返回顶部的效果,主要有如下几种解决方案. 1.纯js,无动画版本 window.scrollTo(x-coord, y-coord); window.scrollTo(0,0); 2.纯 ...

  9. js+JQuery实现返回顶部功能

    很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a  ...

随机推荐

  1. mysql date and time type ---- mysql 时间&日期 类型详解

    mysql 中支持用多种方式来表示时间与日期 一.mysql 中能表示时间与日期的数据类型: 1.表示年 ) -- 最好不要用这个数据类型.对于年份的取值中有[1901 --> 2155] + ...

  2. java的装箱拆箱是什么？

    是什么? 自动装箱就是Java自动将原始类型值转换成对应的对象,比如将int的变量转换成Integer对象,这个过程叫做装箱,反之将Integer对象转换成int类型值,这个过程叫做拆箱. 为什么 把 ...

  3. eclipse开发cocos2dx 3.2环境搭建之中的一个： Android C\C++环境搭建（ndk r9d）

    这几天有时间,琢磨一下cocos2dx.cocos2d家族事实上挺庞大的.也有cocos2d-android这样的能够直接用Java语言来开发的,可是cocos2d-android资料相对少一些.并且 ...

  4. Django 1 创建项目

    shell中输入 django-admin.py startproject mysite. 然后进入mysite目录,输入python manage.py runserver 0.0.0.0:8000 ...

  5. UCOS2系统内核讲述（二）_初始化调用函数

    Ⅰ.写在前面 学习本文之前可以参看我前面的文章: UCOS2_STM32F1移植详细过程(汇总文章) UCOS2系统内核讲述(一)_总体描述 还是按照上一篇文章的思维(从外到内),本文(结合源代码)进 ...

  6. Andriod——setContentView( )方法

    setContentView( )方法 setContentView(R.layout.main)在Android里面,这句话是什么意思? R.layout.main是个布局文件即控件都是如何摆放如何 ...

  7. 网卡优化RPS/RFS

    网卡优化 RSS receive side scaling,网卡多队列,需要硬件支持.网卡接收到网络数据包后,要发送一个硬件中断,通知CPU取数据包.默认配置,都是由CPU0去做. RPS recei ...

  8. DEDECMS模板文件命名规则

    DEDECMS提供的模板文件命名规则,也算是一种规范吧,希望能给大家提供参考. 模板保存位置 模板目录:{cmspath} /templets/样式名称(英文,默认为default,其中system为 ...

  9. 三、thinkphp

    'URL_PATHINFO_DEPR'=>'-',//修改URL的分隔符 'TMPL_L_DELIM'=>'<{', //修改左定界符 'TMPL_R_DELIM'=>'}&g ...

  10. hdu6143 Killer Names 容斥+排列组合

    /** 题目:hdu6143 Killer Names 链接:http://acm.hdu.edu.cn/showproblem.php?pid=6143 题意:有m种字符(可以不用完),组成两个长度 ...