michi.vonah/website-v3
1
0
Fork 0
mirror of https://github.com/michivonah/website-v3.git synced 2025-12-22 21:36:28 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

implement scroll to top function

Browse source
This commit is contained in:
Michi 2025-03-10 21:31:28 +01:00
parent 03ff2ec08f
commit 112f84b1ca
3 changed files with 52 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

6
layouts/partials/scrollTop.html
View file

@ -1,3 +1,5 @@
<div id="scroll-top"> <div class="scroll-top">
<i class="ai-chevron-up"></i> <a href="#" alt="Go to top" title="Go to top">
<i class="ai-chevron-up"></i>
</a>
</div> </div>

17
static/main.js
View file

@ -1,6 +1,10 @@
// Add event listeners // Add event listeners
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
console.log("Hello World!"); scrollTopVisibilityUpdate();
});
window.addEventListener('scroll', function(){
scrollTopVisibilityUpdate();
}); });
document.querySelector(".nav-toggle").addEventListener('click', function(){ document.querySelector(".nav-toggle").addEventListener('click', function(){
@ -14,10 +18,10 @@ document.querySelectorAll(".nav-links a").forEach(element => {
}); });
// Generic functions // Generic functions
function toggleDisplayByClass(className){ function toggleDisplayByClass(className, displayType){
let items = document.getElementsByClassName(className); let items = document.getElementsByClassName(className);
for (const item of items){ for (const item of items){
item.style.display = ((item.style.display == "none") ? 'block' : 'none'); item.style.display = ((item.style.display == "none") ? displayType : 'none');
} }
} }
@ -36,3 +40,10 @@ function toggleNav(){
toggleClass("nav", "open"); toggleClass("nav", "open");
switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross"); switchClasses(".nav-toggle i", "ai-text-align-right", "ai-cross");
} }
// scroll top visibility
function scrollTopVisibilityUpdate(){
const scrollTop = document.querySelector(".scroll-top");
scrollTop.style.display = ((window.scrollY > 20) ? 'flex' : 'none');
scrollTop.style.right = ((window.scrollY > 20) ? '0' : '-55px');
}

34
static/style.css
View file

@ -420,3 +420,37 @@ nav.small img{
} }
} }
/* SCROLL TOP */
.scroll-top{
width: 40px;
height: 40px;
margin: 15px;
background: var(--primary);
color: var(--color);
border-radius: var(--baseRadius);
position: fixed;
bottom: 0;
right: 0;
display: flex;
justify-content: center;
font-size: 28px;
transition: var(--baseTransition);
}
.scroll-top a{
text-decoration: none;
color: var(--color);
margin-top: 0;
transition: var(--baseTransition);
}
.scroll-top a:hover,
.scroll-top a:focus{
margin-top: -5px;
}
.scroll-top i{
stroke-width: 3px;
}