<!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=" 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div> <div style=" 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div> <div style=" 200px; height: 500px; background-color: #ccc; margin: 0 auto;"></div> <div style=" 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>
效果图：
