jquery back to top 页面底部的返回顶部按钮
<!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/
posted on 2016-08-23 10:37 freeliver54 阅读(938) 评论(0) 编辑 收藏 举报
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步