用jquery做的返回顶部滑动按钮

作者:norion时间:2012年4月27日评论次数:0 条

很多博客都有加这玩意,其实用jQuery做挺简单的:

html代码:

<a href="#" id="goTop"> 返 回 顶 部 </a>

css代码:

#goTop{position:fixed !important;position:absolute;right:5px;z-index:1000;bottom:30px !important;bottom:auto;top:auto !important;top:400px;display:none}

jQuery代码:

jQuery(function ($) {
	jQuery(window).scroll(function(){
		if(jQuery(this).scrollTop()>1){
			jQuery('#goTop').fadeIn();
		} else {
			jQuery('#goTop').fadeOut();
		}
	});
	jQuery('#goTop').click(function(){
		jQuery('html,body').animate({scrollTop:0},'slow');
		return false;
	});
});

ie6比较麻烦点,不支持position:fixed,牺牲点不过也能搞定,其他主流浏览器都没啥问题!

如果想多一个返回底部,那也很简单,只要jQuery(‘html,body’)换个底部的选择器就可以了,比如jQuery(‘#footer’),就可以平滑移动到底部了,具体怎么写可以自己写写。

标签:

上一篇: 用setInterval制作不间断闪动提示

下一篇:jQuery解决IE6不支持hover的方法

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注