<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0px; padding: 0px; } .div1,.div2{ 100%; height: 800px; } .div1{ background-color: aqua; } .div2{ background-color: lavenderblush; } .areturn{ position: fixed;/*固定就要设置 右边和底部距离*/ right: 20px;/*距离右边*/ bottom: 20px;/*距离底部*/ 50px; height: 50px; background-color: lavender; color: white; text-align: center;/*蚊子居中*/ line-height: 50px; }
.hide{
display:none;//隐藏
}
</style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="areturn hide" onclick="returnTop()">返回</div> <script src="jquery-3.3.1.min.js"></script><!--不加此句$不识别--> <script> window.onscroll=function () { //console.log($(window).scrollTop())//滚轮距离顶部的距离,就是网页右边那个滑块 if($(window).scrollTop()>300){ $(".areturn").removeClass("hide")//实现功能就是回到顶部时，右边滚轮隐藏 }else{ $(".areturn").addClass("hide") } } function returnTop(){ $(window).scrollTop(0)//强制设置距离为0回到顶部 } </script> </body> </html>