返回头部的jquery代码

分类:jquery实践

jquery代码如下

 jQuery(document).ready(function(){
            var gotopbtn = "gotopbtn";

            jQuery("<div>", {
                id: gotopbtn,
                css: {
                	position:"absolute",
                    display: "none",
					right:(jQuery(document.body).width() - 1000)/2-84
                },
                click: function(){
                    window.scrollTo(0,0);
                },
                html: "<div style=\"width:84px;height:99px;\"></div>"
            }).appendTo(document.body).addClass("backTop");
            jQuery(window).scroll(function(){

                var scrollTop = jQuery(window).scrollTop(), oGoTop = jQuery("#" + gotopbtn);
                    if(scrollTop){
                        oGoTop.show();
                        oGoTop.css("top", scrollTop + jQuery(window).height() - 230);
                    }else{
                        oGoTop.hide();
                    }
            }); 
            jQuery(window).resize(function(){
            	oGoTop = jQuery("#" + gotopbtn);
 				var  right  = (jQuery(document.body).width() - 1000)/2-84;
 				if(right<0){
 					right = 990;
 				}
 				oGoTop.css("right",right);
 					
			  	
			}); 
                       
        }); 

还有一个css 样式:

/*---回到顶部----*/
.backTop {
	position:absolute;
	top:80%;
	width:84px;
	height:99px;
	background:url(../images/backtop.png) no-repeat;
	cursor:pointer;
}

 

本文链接: 返回头部的jquery代码
版权所有:后巴士在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 后巴士 all rights reserved.