<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>scroll</title> </head> <style> *{ margin: 0; padding: 0; } header{ width: 100%; height: 100px; background:rgba(0,0,0,0.8); position: fixed; left: 0; top: 0; text-align: center; font-size: 25px; line-height: 100px; color: #fff; font-family: "微软雅黑"; } footer{ width: 100%; height: 300px; background:rgba(0,0,0,0.8); text-align: center; font-size: 25px; line-height: 100px; color: #fff; font-family: "微软雅黑"; } .content{ width: 100%; height: 2500px; } .btn{ position: fixed; left: 60%; bottom: 5px; padding: 15px 30px; border-radius: 10px; background:green; color: #fff; font-size: 25px; cursor: pointer; } </style> <body> <header> scroll 与 按钮的位置 </header> <div class="content"></div> <footer> 按钮在footer顶部</footer> <div class="btn">我在屏幕最舒服的位置</div> </body> <script src = "jquery.js"></script> <script> $(window).scroll(function(){ var btn = $(".btn"); var scrollTop = $(document).scrollTop(); //滚动条到顶部的距离 var textHeight = $(".content").height() + $("footer").height(); //文档的高度 var pageHeight = $(window).height() //当前页面的高度 var scrollBottom = textHeight - pageHeight - scrollTop; //滚动条到底部的距离 var footerHerght = $("footer").height(); //footer的高度 var value = 100; console.log(scrollBottom); if(scrollBottom < footerHerght){ //滚动条到底部的距离 小于 footer高度 按钮放在footer之上 btn.css("bottom", footerHerght - scrollBottom + 5 + 'px' ) }else{ btn.css("bottom", "5px"); } }) </script> </html>