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