<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>回到顶部</title> <style type="text/css"> body { height: 8000px; } h1{ color: #000; } img { position: fixed; bottom: 50px; right: 50px; width: 150px; height: 195px; display: none; z-index: 100; } </style> </head> <body> <!-- 返回顶部小火箭 --> <img src="img/gotop.gif" /> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script> $(function(){ $(window).scroll(function(){//scroll 页面滚动事件 var sTop=$(window).scrollTop();//scrollTop 滚动距离 if (sTop>=500) { /* * 都可以实现显示的作用 * $("img").show(); $("img").css("display","block")*/ $("img").fadeIn(); } else{ /* 都可以实现隐藏的作用 * * $("img").hide() $("img").css("display","none")*/ $("img").fadeOut() } }) $("img").click(function(){ $("body,html").animate({scrollTop:0},500) }) }) </script> </body> </html>
jQuery实现页面回到顶部功能
猜你喜欢
转载自www.cnblogs.com/zhangweiaiweb/p/10211756.html
今日推荐
周排行