<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document
</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#icon_top_end{ display: none;}
#back-top {
position: fixed;
bottom: 20px;
right: 2%;
z-index: 100;
}
#back-end {
position: fixed;
bottom: 40px;
right: 2%;
z-index: 100;
}
</style>
</head>
<body>
<!-- 侧边栏 按钮-->
<div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
<div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
<div style="width: 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div>
<div style="width: 200px; height: 500px; background-color: #edfefe; margin: 0 auto;"></div>
<div id="icon_top_end">
<div id="back-top">
<button class="styled-button">TOP
</button>
</div>
<div id="back-end">
<button class="styled-button">Bottom
</button>
</div>
</div>
<!--底部 内容-->
<div id="footer"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
/**
* 回到顶部
*/
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#icon_top_end').show('slow');
} else {
$('#icon_top_end').hide('slow');
}
});
$('#back-top').click(function() {
$('html,body').stop();
$('html,body').animate({
scrollTop: '0px'
}, 1000);
});
/**`1
* 回到底部
*/
$('#back-end').click(function() {
$('html,body').stop();
$('html,body').animate({
scrollTop: $('#footer').offset().top
}, 1000);
});
});
</script>
</body>
</html>
效果图：
转载于:https://www.cnblogs.com/huanghuali/p/7045667.html
