动画回到网页顶部，使用了jQuery 1.4

2024-09-05 12:18:07

字体：大中小

来源：转载

供稿：网友

回到网页顶部的一个功能，动画版的，点击后滚动至网页顶部，引用了jQuery 1.4版本，代码超简洁，也可借此机会学习一下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=utf-8" /><title>有趣的动画回到顶部</title><script type="text/javascript" src="http://www.codefans.net/ajaxjs/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">Top</div> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</body></html>

上一篇：页面顶部和底部切换功能，仿twitter效果

下一篇：JS版返回网页顶部精简版代码

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注