码迷,mamicode.com
首页 > Web开发 > 详细

返回顶部 JS 图片 悬浮

时间:2014-07-19 00:19:19      阅读:269      评论:0      收藏:0      [点我收藏+]

标签:返回顶部   style   blog   http   java   color   

1、首先创建“返回顶部”元素

    <!-- toTop -->
    <div id="toTop" style="position: fixed; z-index:99; bottom:89px; right:60px; display:none;" >
        <a href="javascript:scroll(0,0)"><img src="${pageContext.request.contextPath}/images/toTop.png"/></a>
    </div>


2、为窗口的scroll事件绑定处理函数

//为窗口的scroll事件绑定处理函数    
    $(window).scroll(function(){        
        var min_height = window.screen.availHeight; 
        //获取窗口的滚动条的垂直位置        
        var s = $(window).scrollTop();        
        //当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐        
        if( s > min_height){            
            $("#toTop").fadeIn(100);        
        }else{            
            $("#toTop").fadeOut(200);        
        };    
    });

搞定,附上返回顶部图标bubuko.com,布布扣

返回顶部 JS 图片 悬浮,布布扣,bubuko.com

返回顶部 JS 图片 悬浮

标签:返回顶部   style   blog   http   java   color   

原文地址:http://www.cnblogs.com/siyu/p/3853661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!