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
You need to sign in or sign up before continuing.
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