您的位置：首页 > 其它

当页面出现滚动条时，点击置顶的特效

2017-04-07 19:27 169 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery-3.0.0.min.js"></script>
</head>
<body>
<style>
#roll
{
z-index:999;
display: block;
position: fixed;
right: 10px;
bottom: 50px;
display: none;
cursor: pointer;
height: 72px;
width: 26px;
}
</style>
<div style="height:115px;width:100%;background-color: black"></div>
<div class="tabBody" id="tupping-content" style="height:615px;width:100%;overflow-x:hidden;overflow-y:auto;">
<div style="width: 100%;height: 3000px;background-color: #00A0E9">
</div>
</div>
<div id="roll"><div title="回到顶部" id="roll_top">回到顶部</div></div>
</body>
<script type="text/javascript">
$(function(){
$('#roll').click(function () {
$("#tupping-content").animate({ scrollTop: '0px' },1000);

});
});
var _windowScrollTop;
jQuery("#tupping-content").scroll(actionEvent).resize(actionEvent);
function actionEvent() {
_windowScrollTop = jQuery("#tupping-content").scrollTop();
if(_windowScrollTop<300){
$("#roll").css("display","none");
}else {
$("#roll").css("display","block");
$("#roll").css("position","fixed");
$("#roll").css("right","20px");
$("#roll").css("bottom","20px");
}
}
jQuery("#tupping-content").scroll();
</script>
</html>

效果如图，点击回到顶部：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航