jquery返回顶部

[code]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jquery返回顶部</title>
</head>
<body>
<style type="text/css">
body{min-height: 5000px; background: pink;}
#gotoTop {
display: none;
position: fixed;
width: 55px;
height: 55px;
background-image: url(images/gototop.png);
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
bottom: 85px;
right: 45px;
cursor: pointer;
}
</style>

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
gotoTop();
});

/**
* 返回顶部
*/
function&nbsp;gotoTop(min_height){
//预定义返回顶部的html代码，它的css样式默认为不显示
var&nbsp;gotoTop_html&nbsp;=&nbsp;"<div id='gotoTop'></div>";&nbsp;//将返回顶部的html代码插入页面上id为page的元素的末尾
$("body").append(gotoTop_html);&nbsp;

//定义返回顶部点击向上滚动的动画
$("#gotoTop").click(function(){
$('html,body').animate({scrollTop:0},700);
}).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现
function(){
$(this).addClass("hover");
},&nbsp;function(){
$(this).removeClass("hover");
}
);&nbsp;

//获取页面的最小高度，无传入值则默认为600像素
min_height&nbsp;?&nbsp;min_height&nbsp;=&nbsp;min_height&nbsp;:&nbsp;min_height&nbsp;=&nbsp;600;&nbsp;//为窗口的scroll事件绑定处理函数&nbsp;

$(window).scroll(function(){
//获取窗口的滚动条的垂直位置
var&nbsp;s&nbsp;=&nbsp;$(window).scrollTop();&nbsp;

//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐
if(&nbsp;s&nbsp;>&nbsp;min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
};
});
};
</script>
</body>
</html>
[/code]

[code]

<!DOCTYPE html>

<html>

<head>

<title>Jquery返回顶部</title>

</head>

<body>

body{min-height: 5000px; background: pink;}

#gotoTop {

display: none;

position: fixed;

width: 55px;

height: 55px;

background-image: url(images/gototop.png);

background-size: 100%;

background-position: center;

background-repeat: no-repeat;

bottom: 85px;

right: 45px;

cursor: pointer;

}

</style>

$(document).ready(function(){

gotoTop();

});

/**

* 返回顶部

function gotoTop(min_height){

//预定义返回顶部的html代码，它的css样式默认为不显示

var gotoTop_html = "<div id='gotoTop'></div>"; //将返回顶部的html代码插入页面上id为page的元素的末尾

$("body").append(gotoTop_html); 

//定义返回顶部点击向上滚动的动画

$("#gotoTop").click(function(){

$('html,body').animate({scrollTop:0},700);

}).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现

function(){

$(this).addClass("hover");

}, function(){

$(this).removeClass("hover");

}

); 

//获取页面的最小高度，无传入值则默认为600像素

min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处理函数 

$(window).scroll(function(){

//获取窗口的滚动条的垂直位置

var s = $(window).scrollTop(); 

//当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐

if( s > min_height){

$("#gotoTop").fadeIn(100);

}else{

$("#gotoTop").fadeOut(200);

};

});

};

</script>

</body>

</html>

[/code]

点击此处查看效果：gototop

下载源程序：gototop