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

2020-01-27 13:44:11

字体：大中小

来源：转载

供稿：网友

回到网页顶部的一个功能，动画版的，点击后滚动至网页顶部，引用了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"><a href="#topTo">Top</a></div> <a name="topTo" id="topTo"></a>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</body></html>

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

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

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注