Line 32: | Line 32: | ||
background-color: transparent !important; | background-color: transparent !important; | ||
} | } | ||
+ | .top{ | ||
+ | position: fixed; | ||
+ | right: 50px; | ||
+ | bottom: 100px; | ||
+ | display: none; | ||
+ | } | ||
</style> | </style> | ||
+ | <script> | ||
+ | window.onload = function () { | ||
+ | var gotop = $("gotop"); | ||
+ | var start = 0,end =0; //start是开始位置,end是结束位置 结束位置为0. | ||
+ | var timer = null; //定时器 | ||
+ | var scrollTop = 0; | ||
+ | window.onscroll = function () { | ||
+ | scroll().top> 200 ? show(gotop) :hide(gotop); | ||
+ | start = scroll().top; | ||
+ | } | ||
+ | gotop.onclick = function () { | ||
+ | end=0; | ||
+ | timer = setInterval(function(){ | ||
+ | start = start + (end - start) /10; | ||
+ | window.scrollTo(0,start); //把内容滚动到指定坐标 | ||
+ | if(start == end){ | ||
+ | clearInterval(timer); | ||
+ | } | ||
+ | },10); | ||
+ | } | ||
+ | } | ||
+ | function $(id){ | ||
+ | return document.getElementById(id); | ||
+ | } | ||
+ | function show(obj){ | ||
+ | obj.style.display = "block"; | ||
+ | } | ||
+ | function hide(obj){ | ||
+ | obj.style.display = "none"; | ||
+ | } | ||
+ | function scroll(){ | ||
+ | if(window.pageYOffset != null){ | ||
+ | return { left: window.pageXOffset, | ||
+ | top: window.pageYOffset | ||
+ | } | ||
+ | }else if(document.compatMode == "CSS1Compat"){ | ||
+ | return { | ||
+ | left: document.documentElement.scrollLeft, | ||
+ | top: document.documentElement.scrollTop | ||
+ | } | ||
+ | }else{ | ||
+ | return { left: document.body.scrollLeft, | ||
+ | top: document.body.scrollTop | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </script> | ||
<meta charset="utf-8"> | <meta charset="utf-8"> | ||
<link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | <link href="https://2019.igem.org/Template:SEU/Home_CSS?action=raw&ctype=text/css" rel="stylesheet" type="text/css"> | ||
Line 80: | Line 133: | ||
</div> | </div> | ||
</header> | </header> | ||
+ | <body> | ||
+ | <div class="top" id="gotop"> | ||
+ | <img src="up.jpg" width="30" height="30"> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 14:46, 21 October 2019
![](up.jpg)