jquery,返回顶部本文实例为大家分享了jquery实现返回顶部效果的全部代码，供大家参考，具体内容如下 效果图： 
实现代码： <!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程序设计有所帮助。
jquery,返回顶部
|
