点击按钮回到顶部
Posted 太阳花0525
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击按钮回到顶部相关的知识，希望对你有一定的参考价值。
写页面的时候，经常遇到当滚动条离开页面顶部的时候，会显示一个回到顶部的按钮，点击回到顶部，页面就滑动到页面的顶部。直接贴代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>返回顶部</title> <script src="jquery-1.11.3.js"></script> <style> .img1{ width:100%; height:428px; background:url("MTwoYear1.png") no-repeat center; } .wrapper{ position:relative; } .rt_back{ position:fixed; width:42px; height:42px; bottom:20px; right:20px; } </style> </head> <body lang="zh-cn"> <div class="wrapper"> <div class="img"> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> <div class="img1"></div> </div> </div> <div class="rt_back"> <img src="dingbu.png"> </div> <script> (function(){ $(".rt_back").hide(); $(window).scroll(function(){ if($(window).scrollTop()>0){ $(".rt_back").fadeIn(400); }else{ $(".rt_back").fadeOut(400); } }); })(window); $(".rt_back").click(function(){ $("html,body").animate({ scrollTop:\'0\' },1000); }); </script> </body> </html>
这是向上按钮的图片。
以上是关于点击按钮回到顶部的主要内容，如果未能解决你的问题，请参考以下文章