View source for Template:SUSTech Shenzhen/tools/topBooster2019

<html>
	<head>
		<!-- Adapted from http://html-tuts.com/back-to-top-button-jquery/ -->
		
		<style>
			a#tb_back-to-top {
				display: none;	/* Modified in jQuery */
				width: 60px;
				height: 60px;
				text-indent: -9999px;	/* Spare space for img */
				position: fixed;
				z-index: 999;
				right: 26px;
				bottom: 26px;
				opacity: 0.6;
				background: rgb(48, 145, 202) url(https://static.igem.org/mediawiki/2019/b/bf/T--SUSTech_Shenzhen--Top_Booster_Button.jpg) no-repeat center 43%;
				
				-webkit-border-radius: 30px;
				-moz-border-radius: 30px;
				-ms-border-radius: 30px;
				-o-border-radius: 30px;
				border-radius: 30px;
				
				-webkit-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
				-ms-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
				-moz-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
				-o-box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
				box-shadow: 3px 3px 5px 2px rgba(0,0,0,0.2);
				
				transition: background-color 0.3s;
			}
			
			a#tb_back-to-top:hover {
				background-color: black;
			}
			
			a#tb_back-to-top:active {
				background-color: #27ae61;
			}
		</style>
		
	</head>
	
	<body>
		<a href="javascript:void(0);" id="tb_back-to-top">Back to Top</a>
	</body>
	
	<script>
		var amountScrolled = 300;
		
		$(window).scroll(function() {
			if ($(window).scrollTop() > amountScrolled) {
				$("a#tb_back-to-top").fadeIn("slow");
			} else {
				$("a#tb_back-to-top").fadeOut("slow");
			}
		});
		
		$("a#tb_back-to-top").click(function() {
			$("html, body").animate({
				scrollTop: 0
			}, 1800, "swing");
			return true;
		});
	</script>
	
</html>