Difference between revisions of "Template:Groningen"

Line 44: Line 44:
  
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
//Smooth Scroll:
+
 
 +
/// Smooth Scroll: ///
  
 
$(document).ready(function(){
 
$(document).ready(function(){
Line 71: Line 72:
 
});
 
});
  
−
// To the top button
+
/// To the top button: ///
 +
 
 
// When the user scrolls down 20px from the top of the document, show the button
 
// When the user scrolls down 20px from the top of the document, show the button
 
window.onscroll = function() {scrollFunction()};
 
window.onscroll = function() {scrollFunction()};
Line 77: Line 79:
 
function scrollFunction() {
 
function scrollFunction() {
 
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
 
     if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
−
         document.getElementById("myBtn").style.display = "block";
+
         document.getElementById("scrollBtn").style.display = "block";
 
     } else {
 
     } else {
−
         document.getElementById("myBtn").style.display = "none";
+
         document.getElementById("scrollBtn").style.display = "none";
 
     }
 
     }
 
}
 
}
Line 628: Line 630:
  
 
}
 
}
 +
 +
<!---OWN STYLE--->
 +
<style>
 +
#scrollBtn {
 +
  display: none;
 +
  position: fixed;
 +
  bottom: 20px;
 +
  right: 30px;
 +
  z-index: 99;
 +
  font-size: 18px;
 +
  border: none;
 +
  outline: none;
 +
  background-color: red;
 +
  color: white;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  border-radius: 4px;
 +
}
 +
 +
#scrollBtn:hover {
 +
  background-color: #555;
 +
}
 +
 +
  
 
</style>
 
</style>
Line 654: Line 680:
 
<!--- Content of the page  --->
 
<!--- Content of the page  --->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
−
<div class="navbar-fixed">
+
<div class="navbar-fixed" id="navbar">
 
<nav class="row blue">
 
<nav class="row blue">
 
<div id="primary_nav_wrap" style="z-index: 2000">
 
<div id="primary_nav_wrap" style="z-index: 2000">
Line 727: Line 753:
 
.mobicon {display:none;}
 
.mobicon {display:none;}
 
</style>
 
</style>
 +
 +
  
  
Line 739: Line 767:
 
</div>
 
</div>
  
−
 
+
<a href="#navbar"><button id="scrollBtn" title="Go to top">Top</button></a>
−
<!---
+
−
<div style="position:relative; height: 15px; ; z-index: 5; box-shadow: 0px 0px 8px 1px black; background-color: white"></div>
+
−
--->
+

Revision as of 09:26, 20 September 2018