本文實(shí)例為大家分享了jquery實(shí)現(xiàn)返回頂部效果的全部代碼，供大家參考，具體內(nèi)容如下
效果圖：
實(shí)現(xiàn)代碼：
<!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(){ // 當(dāng)滾動(dòng)條滾動(dòng)大于200時(shí)出現(xiàn)，未大于，消失 $(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>希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
