| 失效链接处理 |
|
jquery实现页面常用的返回顶部效果 PDF 下载
本站整理下载：
相关截图：
主要内容：
实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部</title> <style type="text/css"> *{margin: 0; padding: 0; }.wrap{ height: 2000px; }.gotop{ display: block; width: 32px; height: 32px; background-color: red; text-align: center; text-decoration: none; font-size: 14px; font-weight: bold; color: white; line-height: 32px; position: fixed; right:50px; bottom:50px; opacity: 0; /*top: 500px;*/
}</style> </head> <body> <div class="wrap"> <a href="###" class="gotop">TOP</a> </div> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ // 当滚动条滚动大于200时出现，未大于，消失 $(window).scroll(function(){ if($(document).scrollTop()<200){ // alert("kk"); $(".gotop").stop().animate({ opacity: 0 },1000) }else{ $(".gotop").show().stop().animate({ opacity: 1 },1000) }})// 返回顶部 $(".gotop").on("click",function(){ $("html body").animate({ scrollTop:0 },1000) })})</script> </body> </html> 希望本文所述对大家学习javascript程序设计有所帮助。
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
