"
Team:USTC-China/temp00
From 2012.igem.org
(Difference between revisions)
| Line 138: | Line 138: | ||
</div><!--the centercontent--> | </div><!--the centercontent--> | ||
| + | <page></page> | ||
| + | <script type="application/javascript" > | ||
| + | function gotoTop(min_height){ | ||
| + | //预定义返回顶部的html代码，它的css样式默认为不显示 | ||
| + | var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; | ||
| + | //将返回顶部的html代码插入页面上id为page的元素的末尾 | ||
| + | $("#page").append(gotoTop_html); | ||
| + | $("#gotoTop").click(//定义返回顶部点击向上滚动的动画 | ||
| + | function(){$('html,body').animate({scrollTop:0},700); | ||
| + | }).hover(//为返回顶部增加鼠标进入的反馈效果，用添加删除css类实现 | ||
| + | function(){$(this).addClass("hover");}, | ||
| + | function(){$(this).removeClass("hover"); | ||
| + | }); | ||
| + | //获取页面的最小高度，无传入值则默认为600像素 | ||
| + | min_height ? min_height = min_height : min_height = 600; | ||
| + | //为窗口的scroll事件绑定处理函数 | ||
| + | $(window).scroll(function(){ | ||
| + | //获取窗口的滚动条的垂直位置 | ||
| + | var s = $(window).scrollTop(); | ||
| + | //当窗口的滚动条的垂直位置大于页面的最小高度时，让返回顶部元素渐现，否则渐隐 | ||
| + | if( s > min_height){ | ||
| + | $("#gotoTop").fadeIn(100); | ||
| + | }else{ | ||
| + | $("#gotoTop").fadeOut(200); | ||
| + | }; | ||
| + | }); | ||
| + | }; | ||
| + | gotoTop(); | ||
| + | </script> | ||
Revision as of 08:01, 17 August 2012
SPONSER
