jquery 页面滚动条回到顶部_一款回到顶部的 jQuery 插件,支持 Div 中的滚动条回到顶部...

//https://github.com/rogervila/jquery-GoUP-plugin//笔者(http://music.cnblogs.com)已经修改了一些代码,和原来的有区别,请注意!

(function($) {var defaultImgsrc = "http://goo.gl/VDOdQc";var defaultImgWidth = 72;if (typeof (document.scripts) != 'undefined') {var js =document.scripts;var currentJsPath = js[js.length - 1].src.substring(0, js[js.length - 1].src.lastIndexOf("/") + 1);

defaultImgsrc= currentJsPath + "back_to_top_white.gif";

defaultImgWidth= 38;

}

$.fn.goup= function(options) {

$.fn.goup.defaultOpts={

alwaysAppear:false,

scrollTopContainner:null,

appearFromTop:200,

scrollTime:500,

imgSrc: defaultImgsrc,//it works with short urls

width: defaultImgWidth,

place:"bottom-right",

fadein:500,

fadeout:500,

opacity:0.8,

marginX:2,

marginY:2};var opts =$.extend({}, $.fn.goup.defaultOpts, options);return this.each(function() {var goup = $(this);

goup.html("");//var goupa = $('#goup a'),

//goupimg = $('#goup a img');

var goupa = goup.find("a");var goupimg = goupa.find("img");//width

goup.css({"position": "fixed","display": "block","width": "'" + opts.width + "px'","z-index": "9"});//opacity

goupa.css("opacity", opts.opacity);

goupimg.attr("src", opts.imgSrc);

goupimg.width(opts.width);if (!opts.alwaysAppear) {

goupimg.hide();

}varjContainner;varjWinObj;if(opts.scrollTopContainner) {

jContainner=opts.scrollTopContainner;

jWinObj=jContainner;

}else{

jContainner= $('body,html');

jWinObj=$(window);

}//appearFromTop, fadein, fadeout

$(function() {if (!opts.alwaysAppear) {

jWinObj.scroll(function() {if ($(this).scrollTop() >opts.appearFromTop) {

goupimg.fadeIn(opts.fadein);

}else{

goupimg.fadeOut(opts.fadeout);

}

});

}//hover effect

$(goupa).hover(function() {

$(this).css("opacity", "1.0");

$(this).css("cursor", "pointer");

},function() {

$(this).css("opacity", opts.opacity);

});//scrollTime

$(goupa).click(function() {

jContainner.animate({

scrollTop:0}, opts.scrollTime);return false;

});

});//place, marginX, marginY:

if (opts.place === "top-right") {

goup.css({"top": opts.marginY + "%","right": opts.marginX + "%"});

}else if (opts.place === "top-left") {

goup.css({"top": opts.marginY + "%","left": opts.marginX + "%"});

}else if (opts.place === "bottom-right") {

goup.css({"bottom": opts.marginY + "%","right": opts.marginX + "%"});

}else if (opts.place === "bottom-left") {

goup.css({"bottom": opts.marginY + "%","left": opts.marginX + "%"});

}else{

goup.css({"bottom": opts.marginY + "%","right": opts.marginX + "%"});

}

});

};

})(jQuery);

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值