You need to sign in or sign up before continuing.
Commit 30f570a8 authored by Rosanny Sihombing's avatar Rosanny Sihombing
Browse files

adding "go to top" button

parent a1ccadb0
Showing with 36 additions and 0 deletions
+36 -0
...@@ -46,6 +46,22 @@ html(lang="de") ...@@ -46,6 +46,22 @@ html(lang="de")
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
overflow: hidden; overflow: hidden;
} }
#topBtn {
display: none; /* Hidden by default */
position: fixed; /* Fixed/sticky position */
bottom: 20px; /* Place the button at the bottom of the page */
right: 30px; /* Place the button 30px from the right */
z-index: 99; /* Make sure it does not overlap */
border: none; /* Remove borders */
outline: none; /* Remove outline */
background-color: red; /* Set a background color */
color: white; /* Text color */
cursor: pointer; /* Add a mouse pointer on hover */
padding: 10px; /* Some padding */
font-size: 18px; /* Increase font size */
}
body body
div(class="container") div(class="container")
div(class="row") div(class="row")
...@@ -87,6 +103,9 @@ html(lang="de") ...@@ -87,6 +103,9 @@ html(lang="de")
a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank") a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
| </div> | </div>
button(onclick="topFunction()" id="topBtn")
i(class="fa fa-chevron-up")
// jQuery // jQuery
script(src="https://code.jquery.com/jquery-3.3.1.min.js") script(src="https://code.jquery.com/jquery-3.3.1.min.js")
script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous") script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", crossorigin="anonymous")
...@@ -97,6 +116,23 @@ html(lang="de") ...@@ -97,6 +116,23 @@ html(lang="de")
// General functions // General functions
script(src="/js/generalFunction.js") script(src="/js/generalFunction.js")
script. script.
//Get the "go to the top" button:
var myTopBtn = document.getElementById("topBtn");
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
myTopBtn.style.display = "block";
} else {
myTopBtn.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
function searchFunction() { function searchFunction() {
var input = document.getElementById("searchInput") var input = document.getElementById("searchInput")
var filter = input.value.toUpperCase() var filter = input.value.toUpperCase()
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment