Maison >interface Web >js tutoriel >Retour dynamique au code d'effets spéciaux implémenté par jquery_jquery
L'exemple de cet article décrit le code d'effet spécial dynamique de retour en haut implémenté par jquery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Cet effet de retour dynamique jquery en haut ne revient pas en haut de la page Web d'un seul coup, mais a un effet de mise en mémoire tampon et un effet d'animation. Il utilise le plug-in jQuery. Il s'agit d'une page Web très couramment utilisée. effet spécial. J'espère que vous l'aimerez.
La capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démo en ligne est la suivante :
http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/
Le code spécifique est le suivant :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jquery动态回到顶部特效</title> </head> <body> <style> #goTopBtn {position: fixed;line-height:36px;width:36px;bottom:35px;height:36px;cursor:pointer;display:none; background:url(images/back_to_top_white.gif);} </style> <br/> <p style="text-align:center;font-family:Georgia, 'Times New Roman', Times, serif;font-size:24px;font-weight:bold;">***,how are you。 <br/>Just do what you want do!!!</p> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <div id="goTopBtn"></div> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> $(window).scroll(function(){ var sc=$(window).scrollTop(); var rwidth=$(window).width() if(sc>0){ $("#goTopBtn").css("display","block"); $("#goTopBtn").css("left",(rwidth-36)+"px") }else{ $("#goTopBtn").css("display","none"); } }) $("#goTopBtn").click(function(){ var sc=$(window).scrollTop(); $('body,html').animate({scrollTop:0},500); }) </script> </body> </html>
J'espère que cet article sera utile à tous ceux qui programment jQuery.