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

回到顶部 jquery

时间:2014-05-08 23:20:43      阅读:357      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   ext   

bubuko.com,布布扣
        //回到顶部
        $(function() {
             $.fn.backToTop = function(options) {
                var defaults = {            
                    showHeight : 120,
                    speed : 100
                };

                var options = $.extend(defaults, options);
                $("#footer").append("<div id=‘totop‘ style=‘cursor:pointer;position:fixed;bottom:20px;right:10px;z-index:9999;width:30px;height:30px;background-color:#000;‘><a>返回</a></div>");
                var $toTop = $(this);
                var $top = $("#totop");
                var $ta = $("#totop a");
                $toTop.scroll(function(){
                    var scrolltop=$(this).scrollTop();      
                    if(scrolltop>=options.showHeight){              
                        $top.show();
                    }
                    else{
                        $top.hide();
                    }
                }); 
                $ta.hover(function(){       
                    $(this).addClass("cur");    
                },function(){           
                    $(this).removeClass("cur");     
                }); 
                $top.click(function(){
                    $("html,body").animate({scrollTop: 0}, options.speed);  
                });
             }
bubuko.com,布布扣

 

回到顶部 jquery,布布扣,bubuko.com

回到顶部 jquery

标签:style   blog   class   code   java   ext   

原文地址:http://www.cnblogs.com/taotaowill/p/3716717.html

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