本文實例為大家分享了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程序設計有所幫助。
新聞熱點
疑難解答
