Welcome, Old Sport!

Dynamic返回顶部

by ilikecss ON 2012/04/11 27603

Jeff Starr大师又更新主题了,在我关注他的2年里从来没有更改过,但最近1个月却更改了2次,这难道是中年人不安定因素?大师写了一个返回页顶的脚本,我觉得蛮不错的,在这里和大家分享。

代码比较简单,将脚本插入到页面,OK就完成了。脚本设置了按钮的HTML以及CSS样式,直接修改就可以设定为自己需要的了。


 //转载 http://perishablepress.com/dynamic-top-link/
function xycss_dynamic_top_link(){
	if($(window).height() < $(document).height()) {
		$(\'body\').append(\'<div class=\"button\" id=\"top-link\">&uarr;</div>\');
		$(\'#top-link\').click(function() {
			window.location = \"#top\";
		}).css({
			width:\'24px\', height:\'24px\', lineHeight:\'24px\', bottom:\'3px\', right:\'3px\', 
			background:\'#663300\', color:\'#fff\', opacity:0.3, zIndex:999, textAlign:\'center\', 
			textDecoration:\'none\', position:\'fixed\', cursor:\'pointer\',
			border:\'3px solid #c7bc8e\', borderRadius:\'24px\'
		}).hover(function(){
			$(this).css(\'opacity\',0.6);
		},function(){
			$(this).css(\'opacity\',0.3);
		});
	}
}
$(document).ready(function(){
	xycss_dynamic_top_link();
});
$(window).resize(function() {
	$(\'#top-link\').remove();
	xycss_dynamic_top_link();
});
1条评论
  1. #1

    Minecraf说道:

    Good post. I learn something new and challenging on
    websites I stumbleupon everyday. It’s always useful to read through content from other authors and use something from other websites.




TOP