随笔 - 11  文章 - 2  评论 - 1

实现返回top功能

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <meta name="keywords" content="JS代码,悬浮漂浮,JS广告代码,JS特效代码" />
 6 <meta name="description" content="此代码内容为弹性返回顶部JS代码,属于站长常用代码,更多悬浮漂浮代码请访问懒人图库JS代码频道。" />
 7 <title>弹性返回顶部JS代码_懒人图库</title>
 8 <SCRIPT type=text/javascript src="js/scrolltop.js"></SCRIPT>
 9 <LINK rel=stylesheet type=text/css href="css/lrtk.css">
10 </head>
11 
12 <body style="text-align:center">
13 <div id="topcontrol" title="Scroll Back to Top" style="DISPLAY: none; position: fixed; bottom: 30px; left: 50%; margin-left: 491px; opacity: 1; cursor: pointer;">
14 <img src="http://www.paidai.com/images/new/top.jpg" style="width:53px; height:49px"/>
15 </div>
16 <SCRIPT type=text/javascript>goTopEx();</SCRIPT>
17 
18 
19 <br /><br /><br /><br /><br /><br /><br />
20 <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>
21 <p>*尊重他人劳动成果,转载请自觉注明出处!注:此代码仅供学习交流,请勿用于商业用途。</p>
22 <p></p>
23 <p><p>超出首屏范围,即会出现TOP按钮,否则自动隐藏。<br />
24 &nbsp;</p></p>
25 <p></p>
26 
27 
28 
29 </body>
30 </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事件可以同时注册多个,执行时,按照注册的先后顺序执行,可能还有其他办法,目前就知道这两种。

posted @ 2016-03-14 17:11  Double405  阅读(427)  评论(0编辑  收藏  举报