Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
m4lab_tv1
Project Page
Commits
30f570a8
Commit
30f570a8
authored
Oct 27, 2021
by
Rosanny Sihombing
Browse files
adding "go to top" button
parent
a1ccadb0
Changes
1
Hide whitespace changes
Inline
Side-by-side
views/DE/project/projectList.pug
View file @
30f570a8
...
...
@@ -46,6 +46,22 @@ html(lang="de")
-webkit-box-orient: vertical;
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
div(class="container")
div(class="row")
...
...
@@ -87,6 +103,9 @@ html(lang="de")
a(href=item.weburl, class="no_text_decoration stretched-link", target="_blank")
| </div>
button(onclick="topFunction()" id="topBtn")
i(class="fa fa-chevron-up")
// jQuery
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")
...
...
@@ -97,6 +116,23 @@ html(lang="de")
// General functions
script(src="/js/generalFunction.js")
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() {
var input = document.getElementById("searchInput")
var filter = input.value.toUpperCase()
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment