Difference between revisions of "Template:Team:CHINA CD UESTC/basicjs"

Line 1: Line 1:
−
$(document).ready(function(){
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
−
//首先将#back-to-top隐藏
+
<html xmlns="http://www.w3.org/1999/xhtml">
−
$("#back-to-top").hide();
+
<head>
−
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
+
<style type="text/css">
−
$(function () {
+
.page {width:100%; height:500px; text-align: center; margin-bottom:10px; line-height:500px; font-size:80px; font-family:Arial; text-shadow:3px 3px 10px #fff;}
−
$(window).scroll(function(){
+
#rtt {width:50px; height:50px; background:url(https://static.igem.org/mediawiki/2015/e/ed/CHINA_CD_UESTC_gotop.png); background-size:cover; position:fixed; right:50px; bottom:50px; border-radius: 5px; z-index:1000; display:none;}
−
if ($(window).scrollTop()>100){
+
h1{text-align:center;}
−
$("#back-to-top").fadeIn(1500);
+
</style>
 +
<script type="text/javascript">
 +
function myEvent(obj,ev,fn){
 +
if(obj.attachEvent){
 +
obj.attachEvent('on'+ev,fn);
 +
}else{
 +
obj.addEventListener(ev,fn,false);
 +
}
 
}
 
}
−
else
+
myEvent(window,'load',function(){
−
{
+
var oRTT=document.getElementById('rtt');
−
$("#back-to-top").fadeOut(1500);
+
var pH=document.documentElement.clientHeight;
−
}
+
var timer=null;
−
});
+
var scrollTop;
−
//当点击跳转链接后，回到页面顶部位置
+
window.onscroll=function(){
−
$("#back-to-top").click(function(){
+
scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
−
$('body,html').animate({scrollTop:0},1000);
+
if(scrollTop>=pH){
−
return false;
+
oRTT.style.display='block';
−
});
+
}else{
−
});
+
oRTT.style.display='none';
 +
}
 +
return scrollTop;
 +
};
 +
oRTT.onclick=function(){
 +
clearInterval(timer);
 +
timer=setInterval(function(){
 +
var now=scrollTop;
 +
var speed=(0-now)/10;
 +
speed=speed>0?Math.ceil(speed):Math.floor(speed);
 +
if(scrollTop==0){
 +
clearInterval(timer);
 +
}
 +
document.documentElement.scrollTop=scrollTop+speed;
 +
document.body.scrollTop=scrollTop+speed;
 +
}, 30);
 +
}
 
});
 
});
 +
</script>
 +
</head>
 +
<body>
 +
<div id='rtt'></div>
 +
<div class='page' style='background:#ccc;'>Page 1</div>
 +
<div class='page' style='background:#999;'>Page 2</div>
 +
<div class='page' style='background:#ccc;'>Page 3</div>
 +
<div class='page' style='background:#999;'>Page 4</div>
 +
<div class='page' style='background:#ccc;'>Page 5</div>
 +
<div class='page' style='background:#999;'>Page 6</div>
 +
 +
</body>
 +
</html>

Revision as of 00:36, 16 September 2015

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Page 1
Page 2
Page 3
Page 4
Page 5
Page 6