一个简洁有趣的回到顶部代码，基于jQuery框架

发布时间：2018-09-28 20:56:56 所属栏目：Unix 来源：站长网

导读：本文阐述一个简洁有趣的回到顶部代码，在原代码的说明中，作者称这是一个有动画效果的返回网页顶部，这当然要取决于 jQuery 框架了，大家仔细看看吧！为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示网页

　　本文阐述一个简洁有趣的回到顶部代码，在原代码的说明中，作者称这是一个有动画效果的返回网页顶部，这当然要取决于jQuery框架了，大家仔细看看吧！

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示

　　网页演示：猛击此处

　　运行演示：

<!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=gbk" /> <title>有趣的动画回到顶部</title> <script type="text/javascript" src="/uploads/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $(window).scroll(function(){ var $scrollTop = $(window).scrollTop(); if($(window).scrollTop() > $(window).height()/2){ var $wt = parseInt(($(window).height())*0.9); var $getTop = parseInt($scrollTop)+$wt; $("#content").fadeIn(500).animate({"top":$getTop + "px"},{duration:600,queue:false}); }else if($(window).scrollTop() <= $(window).height()/2){ $("#content").fadeOut(); } }) }) </script> <style type="text/css">  </style> </head> <body> <div id="content"><a href="#topTo">回到顶部</a></div> <a name="topTo" id="topTo"></a>liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效liehuo.net 网页特效 </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!