goToTop(回到顶部)按钮的制作

评论(6)

前阵子给博客加了个回到顶部按钮,虽然访客不多,点此键的人少之又少,但总觉得人家有的自己也得有,所以就琢磨着给自己加了一个回到顶部的按钮,图片是用的一个音乐社区的按钮,感觉样式不错,效果嘛看一下本博就可以了。其他的不多说了主要说一下原理以及公布一下源码。

回到顶部按钮的实现步骤

原理不想讲太多,网上铺天盖地的教程不少,讲的再多你不会用到你自己的网页上也是白搭。
主要原理就是
1.当滚动条下滑到窗口一页以外的位置时,按钮出现。
2.点击按钮,窗口滑动回顶部。
3.当窗口滑动回顶部时,回到顶部按钮隐藏。

2012年6月21日 续写 后记:回到顶部 JS 插件

实现代码

HTML 代码

<div class="goTop">
<a id="goToTop" href="javascript:void(0)" onclick="return false" title="返回顶部"></a>
</div>

CSS 代码

.goTop {
    height: 50px;
    overflow: hidden;
    width: 50px;
    position: absolute;
	top:0;
	display: none;
}
.goTop a, .goTop a:link {
    background: url("img/ico_gotop.png") no-repeat scroll 0 0 transparent;
    display: block;
	height: 50px;
	width: 50px;
}
.goTop a:hover {
    background: url("img/ico_gotop.png") no-repeat scroll 0 -50px transparent;
    display: block;
}

JS 代码
(需 Jquery 支持,这个你懂,如果你不懂,那哥,你还是休息一下,好不?)

$(window).scroll(function(){//注册滑动条滑动时的动作
 
//滚动条到顶部的距离
var scrTop = $(window).scrollTop();
 
//回到顶部按钮距离窗口右侧的距离,
//.midfix 是我页面最外层div
//这句比较难理解,用到了三元运算,不懂的百度下。
var myWidth = ($(window).width() > $(".midfix").width()) ?(($(window).width() - $(".midfix").width())/2 - 80):0; 
 
//窗口高度
var windowTop = $(window).height();
 
if ((windowTop-300)<scrTop){
//滚动高度大于一页
$(".goTop").css("top",(scrTop + windowTop -100)).css("right",myWidth).fadeIn("slow");
}else{
//滚动高度小于一页
$(".goTop").css("top",(scrTop + windowTop -100)).css("right",myWidth).fadeOut("slow");
}
});
 
//按钮被点击后,滑动到顶部。
$('#goToTop').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});

素材

按钮 当然还得要图片咯,右键图片另存为,放到你主题合适的位置。

回到顶部按钮图片

回到顶部按钮图片

================ 后记的华丽分割 =============

回到顶部 JS 插件

上一个 MG12 的插件代码,改插件相较之下实现起来更为简单,只需要添加js代码和 javascript 代码
闲话少说,以下部分出自我的目前用的主题:

插件 js 代码部分

该部分代码,独立成为一个文件或者加在你现有的js文件里都可以。

//GoTop mg12
GoTop = function() {
this.config = {
pageWidth : 960,//页面宽度
nodeId : 'go-top',//回到顶部按钮的ID
nodeWidth : 50,//按钮宽度
distanceToBottom : 120,//距离底部高度
hideRegionHeight : 90,//消失高度
text : ''
};
	this.cache = {
		topLinkThread : null
	}
};
GoTop.prototype = {
	init : function(config) {
		this.config = config || this.config;
		var _self = this;
		jQuery(window).scroll(function() {
			_self._scrollScreen({
				_self : _self
			});
		});
		jQuery(window).resize(function() {
			_self._resizeWindow({
				_self : _self
			});
		});
		_self._insertNode({
			_self : _self
		});
	},
	_insertNode : function(args) {
		var _self = args._self;
		var topLink = jQuery('<a id="' + _self.config.nodeId + '" href="#">' + _self.config.text + '</a>');
topLink.appendTo(jQuery('body'));
if(jQuery.scrollTo) {
	topLink.click(function() {
		jQuery.scrollTo({
			top : 0
		}, 400);
		return false;
	});
}
var right = _self._getDistanceToBottom({
	_self : _self
});
if(/MSIE 6/i.test(navigator.userAgent)) {
topLink.css({
	'display' : 'none',
'position' : 'absolute',
'right' : right + 'px'
	});
} else {
	topLink.css({
		'display' : 'none',
'position' : 'fixed',
'right' : right + 'px',
'top' : (jQuery(window).height() - _self.config.distanceToBottom) + 'px'
		});
	}
},
_scrollScreen : function(args) {
	var _self = args._self;
	var topLink = jQuery('#' + _self.config.nodeId);
if(jQuery(document).scrollTop() <= _self.config.hideRegionHeight) {
	clearTimeout(_self.cache.topLinkThread);
	topLink.hide();
	return;
}
if(/MSIE 6/i.test(navigator.userAgent)) {
clearTimeout(_self.cache.topLinkThread);
topLink.hide();
_self.cache.topLinkThread = setTimeout(function() {
	var top = jQuery(document).scrollTop() + jQuery(window).height() - _self.config.distanceToBottom;
	topLink.css({
		'top' : top + 'px'
			}).fadeIn();
		}, 400);
	} else {
		topLink.fadeIn();
	}
},
_resizeWindow : function(args) {
	var _self = args._self;
	var topLink = jQuery('#' + _self.config.nodeId);
var right = _self._getDistanceToBottom({
	_self : _self
});
var top = jQuery(window).height() - _self.config.distanceToBottom;
if(/MSIE 6/i.test(navigator.userAgent)) {
	top += jQuery(document).scrollTop();
}
topLink.css({
	'right' : right + 'px',
'top' : top + 'px'
		});
	},
	_getDistanceToBottom : function(args) {
		var _self = args._self;
		var right = parseInt((jQuery(window).width() - _self.config.pageWidth) / 2 - _self.config.nodeWidth - 20, 10);
		if(right < 10) {
			right = 10;
		}
		return right;
	}
};

然后在你的页面底部添加如下js代码

	(new GoTop()).init({
	pageWidth			:980,
	nodeId				:'go-top',
	nodeWidth			:50,
	distanceToBottom	:125,
	hideRegionHeight	:130,
	text				:''
});

CSS 代码部分

 
a#go-top {
	background: url("img/icons.png") no-repeat scroll 0 -93px transparent;
	width: 50px;
	display: none;
	height: 35px;
	text-align: center;
	text-decoration: none;
	color: #999;
	position: fixed
}
a#go-top:hover {
	background-position: 0 -128px
}




  1. 呐,很不错唉~

  2. @梦康
    可以的 ,其实还有个简化js版的,只设置css和js代码就可以了,后面会在本文补充

  3. @心语
    没本事艺术,就只能技术了

  4. html我写在footer.php可以吧?
    其他两个放哪?

  5. 赞一个,都在研究技术噢

  6. 我研究下,不懂在请教了。