jquery特效之返回顶部代码(带提示效果)

发布时间:2020-12-27编辑:脚本学堂
一段jquery实现返回顶部的代码,带不错的提示效果,对于面面中的垂直滚动条,当出现滚动条时自动显示回到顶部的按钮,需要的朋友参考下。

 jquery回到顶部的代码,当网页中出现垂直滚动条时自动显示回到顶部的按钮,兼容IE,火狐等浏览器。

jquery脚本记录鼠标往下滚动,让浏览器出现滚动条,jquery回到顶部。

完整代码:
 

复制代码 代码示例:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
.back-to {
position: fixed;
bottom: 35px;
*bottom: 50px;
_bottom: 35px;
right: 10px;
z-index: 1001;
width: 50px;
zoom: 1
}
* html .back-to {
position: expression(function(ele){ele.runtimeStyle.position='absolute';Expressions.style.position.fixed(ele);}(this));
_zoom: 1
}
.back-to .back-home {
float: right;
display: block;
width: 50px;
height: 50px;
background: url(back-home.png) no-repeat 0 0;
outline: 0 none;
text-indent: -9999em
}
.back-to .back-home:hover {
background-position: -50px 0
}
.back-to .back-top {
float: right;
display: block;
width: 50px;
height: 50px;
background: url(back-top.png) no-repeat 0 0;
margin-left: 10px;
outline: 0 none;
text-indent: -9999em
}
.back-to .backtotop {
float: left;
display: block;
width: 50px;
height: 50px;
background: #666 url(home.png) no-repeat -135px -249px;
margin-bottom: 15px;
outline: 0 none;
text-indent: -9999em;
-moz-border-radius: 4px;
-khtml-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
position: relative
}
.back-to .backtotop:hover {
background-color: #333;
background-position: -135px -207px
}
.back-to .backtotop .back-tip {
position: absolute;
visibility: hidden;
top: -31px;
left: -10px
}
.back-to .backtotop:hover .back-tip {
visibility: visible
}
.back-to .back-top:hover {
background-position: -50px 0
}
</style>
</head>
<body style="height:3000px">
<script src="backtop.js" type="text/javascript"></script>
<div id="toolBackTo" class="back-to" style="display:none;">
<a stats="site_footer_back_to_top" class="backtotop" href="#top">返回顶部
<img stats="site_footer_back_to_top" src="back-tip.png" class="back-tip" />
</a>
</div>
</body>
</html>