Team:CityU HK/Template
From 2014.igem.org
(Difference between revisions)
Line 14: | Line 14: | ||
} | } | ||
+ | /* | ||
+ | Back to top button | ||
+ | */ | ||
+ | #back-top { | ||
+ | position: fixed; | ||
+ | bottom: 30px; | ||
+ | right:30px; | ||
+ | z-index:50; | ||
+ | } | ||
+ | #back-top a { | ||
+ | width: 50px; | ||
+ | display: block; | ||
+ | text-align: center; | ||
+ | font: 11px/100% Arial, Helvetica, sans-serif; | ||
+ | text-transform: uppercase; | ||
+ | text-decoration: none; | ||
+ | color: #bbb; | ||
+ | /* background color transition */ | ||
+ | -webkit-transition: 1s; | ||
+ | -moz-transition: 1s; | ||
+ | transition: 1s; | ||
+ | } | ||
+ | #back-top a:hover { | ||
+ | color: #000; | ||
+ | } | ||
+ | /* arrow icon (span tag) */ | ||
+ | #back-top span { | ||
+ | width: 50px; | ||
+ | height: 50px; | ||
+ | display: block; | ||
+ | background: #ddd url(https://static.igem.org/mediawiki/2014/5/57/Backtotop_BU14.png) no-repeat center center; | ||
+ | /* background color transition */ | ||
+ | -webkit-transition: 1s; | ||
+ | -moz-transition: 1s; | ||
+ | transition: 1s; | ||
+ | } | ||
+ | #back-top a:hover span { | ||
+ | background-color: #F68F52; | ||
+ | } | ||
</style> | </style> | ||
Line 76: | Line 115: | ||
</nav> | </nav> | ||
+ | <p id="back-top"> | ||
+ | <a href="#top"><span></span></a> | ||
+ | </p> | ||
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | ||
Line 99: | Line 141: | ||
}); | }); | ||
</script> | </script> | ||
+ | |||
+ | <!--//back to top arrow--> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | |||
+ | // hide #back-top first | ||
+ | $("#back-top").hide(); | ||
+ | |||
+ | // fade in #back-top | ||
+ | $(function () { | ||
+ | $(window).scroll(function () { | ||
+ | if ($(this).scrollTop() > 100) { | ||
+ | $('#back-top').fadeIn(); | ||
+ | } else { | ||
+ | $('#back-top').fadeOut(); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | // scroll body to 0px on click | ||
+ | $('#back-top a').click(function () { | ||
+ | $('body,html').animate({ | ||
+ | scrollTop: 0 | ||
+ | }, 800); | ||
+ | return false; | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 16:05, 20 September 2014