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

jquery back to top 页面底部的返回顶部按钮

2016-08-23 10:37 686 查看 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Back to top</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script>
<style type="text/css">
.back-to-top {
position: fixed;
bottom: 50px;
right: 150px;

background:url(btn_top.png) no-repeat;

display: none;

height:49px;
width:49px;
cursor: pointer;
}

body{
height:1500px;
}
</style>

</head>
<body>

<div id="back-to-top"  class="back-to-top "></div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {

$(window).scroll(function () {
if ($(this).scrollTop() > 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});

// scroll body to 0px on click
$('#back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});

});
</script>


另有jquery back to top plugin http://www.igloolab.com/back-to-top/
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航