Difference between revisions of "Template:NYMU-Taipei-css"
| Line 2: | Line 2: | ||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> | <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"> | ||
| + | |||
| + | <!-- Bootstrap --> | ||
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> | ||
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
| + | |||
| + | <script> | ||
| + | |||
| + | // back-to-top from bootsnipp | ||
| + | |||
| + | $(document).ready(function(){ | ||
| + | $(window).scroll(function () { | ||
| + | if ($(this).scrollTop() > 50) { | ||
| + | $('#back-to-top').fadeIn(); | ||
| + | } else { | ||
| + | $('#back-to-top').fadeOut(); | ||
| + | } | ||
| + | }); | ||
| + | // scroll body to 0px on click | ||
| + | $('#back-to-top').click(function () { | ||
| + | $('#back-to-top').tooltip('hide'); | ||
| + | $('body,html').animate({ | ||
| + | scrollTop: 0 | ||
| + | }, 800); | ||
| + | return false; | ||
| + | }); | ||
| + | |||
| + | $('#back-to-top').tooltip('show'); | ||
| + | |||
| + | }); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
<style type="text/css" rel="stylesheet"> | <style type="text/css" rel="stylesheet"> | ||
| + | |||
| + | /* back-to-top */ | ||
| + | .back-to-top { | ||
| + | cursor: pointer; | ||
| + | position: fixed; | ||
| + | bottom: 20px; | ||
| + | right: 20px; | ||
| + | display:none; | ||
| + | } | ||
| + | |||
| Line 62: | Line 106: | ||
<body> | <body> | ||
| + | |||
<!--footer--> | <!--footer--> | ||
| Line 89: | Line 134: | ||
</div> | </div> | ||
| + | |||
| + | |||
| + | <!--back-to-top--> | ||
| + | |||
| + | <a id="back-to-top" href="#" class="btn btn-secondary btn-lg back-to-top" role="button" title="Click to return on the top page" data-toggle="tooltip" data-placement="left"> | ||
| + | <span class="glyphicon glyphicon-chevron-up"></span> | ||
| + | </a> | ||
| + | |||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 05:25, 12 August 2017
