您的位置：首页 > Web前端 > JQuery

js+JQuery实现返回顶部功能

2013-03-07 16:16 453 查看
来自：http://www.cnblogs.com/yukaizhao/archive/2012/12/02/js-go-top-function.html#2605234

很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。

首先需要在顶部添加如下html元素：

?
其中a标签指向锚点top，可以在顶部防止一个
<a name="top"></a>
的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

?
　　

上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：











有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。

?
这样就可以了，你可以通过下面的地址观看实际的效果:

http://outofmemory.cn/code-snippet/tagged/javascript

注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

我的微博地址是：http://weibo.com/yukaizhao 我会把一些技术心得碎片写到微博中,欢迎关注。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="css/back-to-top.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
Fun_AddEelement_BackToTop();
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
Fun_back_to_top();
});
function Fun_AddEelement_BackToTop() {
var $container = $('body');
var htmlText = '<p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>';
var $detailContainer = $(htmlText).appendTo($container);
}
function Fun_back_to_top() {
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#back-to-top").fadeIn(1500);
}
else {
$("#back-to-top").fadeOut(1500);
}
});
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function () {
$('body,html').animate({ scrollTop: 0 }, 1000);
return false;
});
}

</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>


back-to-top.css
/*returnTop*/

p#back-to-top{

position:fixed;

display:none;

bottom:20px;

right:80px;

}

p#back-to-top a{

text-align:center;

text-decoration:none;

color:#d1d1d1;

display:block;

width:64px;

/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/

-moz-transition:color 1s;

-webkit-transition:color 1s;

-o-transition:color 1s;

}

p#back-to-top a:hover{

color:#979797;

}

p#back-to-top a span{

background:transparent url(/images/back-to-top.png?1202) no-repeat center;

border-radius:6px;

display:block;

height:64px;

width:56px;

margin-bottom:5px;

/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/

-moz-transition:background 1s;

-webkit-transition:background 1s;

-o-transition:background 1s;

}

#back-to-top a:hover span{

background:transparent url(/images/back-to-top.png?1202) no-repeat center;

}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航