Jquery实现“返回浏览器顶部”特效代码

Jquery实现非常实用的置顶特效使用简单,步骤如下:

1、引用插件js和css文件
2、设置默认参数(showHeight :设置滚动高度时显示、speed :返回顶部的速度以毫秒为单位)

JavaScript代码:

$(function() {
$.fn.manhuatoTop = function(options) {
var defaults = {
showHeight : 150,
speed : 1000
};
var options = $.extend(defaults,options);
$("body").prepend("<div id='totop'><a>返回</a></div>");
var $toTop = $(this);
var $top = $("#totop");
var $ta = $("#totop a");
$toTop.scroll(function(){
var scrolltop=$(this).scrollTop();
if(scrolltop>=options.showHeight){
$top.show();
}
else{
$top.hide();
}
});
$ta.hover(function(){
$(this).addClass("cur");
},function(){
$(this).removeClass("cur");
});
$top.click(function(){
$("html,body").animate({scrollTop: 0}, options.speed);
});
}
});

Css样式代码:

*{padding:0; margin:0}
body{height:2000px}
#totop{position:fixed;bottom:40px;right:10px;z-index:999;width:71px; cursor:pointer; display:none;}
*html #totop{position:absolute;cursor:pointer;right:10px; display:none;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight)-112+"px")}
#totop a{display:block;width:71px;height:24px;padding-top:48px;background:url(../images/toTop.gif) no-repeat;text-align:center;color:#888}
#totop a.cur{background-position:-88px 0;text-decoration:none;color:#3a9}

使用方法

<script type="text/javascript">
$(function (){
$(window).manhuatoTop({
showHeight : 100,//设置滚动高度时显示
speed : 500 //返回顶部的速度以毫秒为单位
});
});
</script>

用到的图片
http://www.17sucai.com/pins/tag/686.html

原文地址:
http://blog.csdn.net/xm1331305/article/details/8559488

This entry was posted in Technology and tagged , , , . Bookmark the permalink. 2,362 views

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>