返回顶部按钮js挂件

(function(){
	var img = {imgW:50, imgH:50, right:5, bottom:5, imgSrc:'images/gototop.png'},
		body = document.body,
		html = document.documentElement;
	//获取滚动条高度
	function getPageScroll(){
		var yScroll; 
		if (html && html.scrollTop){ 
			yScroll = html.scrollTop; 
		} else if (body) { 
			yScroll = body.scrollTop; 
		} 
		return yScroll; 
	}
	//获取参数
	function getParameter(){
		var scripts = document.getElementsByTagName('script'),
			script = scripts[scripts.length - 1];
		return {
			gototop : script.getAttribute('gototop')
		}
	}
	var options = getParameter().gototop, 
		imgW, imgH, right, imgSrc, callbackScroll,callbackClick;
	if (options == null){
		imgW = img.imgW,
		imgH = img.imgH,
		right = img.right,
		bottom = img.bottom,
		imgSrc = img.imgSrc;
	}else{
		var imgO = eval('('+options+')');
		imgW = imgO.width || img.imgW,
		imgH = imgO.height || img.imgH,
		right = ((Math.max(html.clientWidth, html.scrollWidth) - imgO.at)/2 - imgW) || img.right,
		bottom = imgO.bottom || img.bottom,
		imgSrc = imgO.src || img.imgSrc,
		callbackScroll = imgO.callbackScroll || null,
		callbackClick = imgO.callbackClick || null;
	}
	//创建并初始化定位
	var	imgBox = document.createElement('div'),
		$imgBox = $(imgBox),
		posCss = 'position:fixed;'+imgW+'px;height:'+imgH+'px;bottom:'+bottom+'px;right:'+right+'px;background-image:url('+imgSrc+');cursor:pointer;_position:absolute;_background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="'+imgSrc+'", sizingMethod="scale");';
	imgBox.style.cssText = posCss;
	$imgBox.css('opacity',0.5);
	body.appendChild(imgBox);
	$imgBox.hide();
	//方法
	function chechScrollTop(){
		if(html.scrollTop !=0 || body.scrollTop != 0){
			$imgBox.show();
		}else{
			$imgBox.hide();
		}
	}
	onscroll = function(){
		chechScrollTop();
		var isIE = !!window.ActiveXObject; 
		var isIE6 = isIE && !window.XMLHttpRequest; 
		if(isIE6){
			imgBox.style.top = (getPageScroll() + html.clientHeight - (imgH+bottom)) + 'px';
		}
		if(callbackScroll){
			callbackScroll();
		}
	}
	$imgBox.hover(function(){
			$(this).css('opacity',1);
		},function(){
			$(this).css('opacity',0.5);
	});
	$imgBox.click(function(){
		$(this).hide();
		document.documentElement.scrollTop = 0;
		document.body.scrollTop = 0;
		if(callbackClick){
			callbackClick();
		}
	});
})();

　　

此方法用了jq库，需引入。使用方法：

<script type="text/javascript" src="/js/gototop.js" gototop="{'width':60,'height':60,'at':1002,'src':'http://....2.png'}"></script>

可以传4个参数：宽、高、图片、位置。

图片可以用透明的png;

假如页面主体内容宽度为1002，传at为1002，按钮会紧贴1002的位置。

一个参数也不传就使用默认参数，按钮在右下角。