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

17
static/main.js
View file

@ -1,6 +1,10 @@
// Add event listeners
document.addEventListener('DOMContentLoaded', function(){
console.log("Hello World!");
scrollTopVisibilityUpdate();
});
window.addEventListener('scroll', function(){
scrollTopVisibilityUpdate();
});
document.querySelector(".nav-toggle").addEventListener('click', function(){
@ -14,10 +18,10 @@ document.querySelectorAll(".nav-links a").forEach(element => {
});
// Generic functions
function toggleDisplayByClass(className){
function toggleDisplayByClass(className, displayType){
let items = document.getElementsByClassName(className);
for (const item of items){
item.style.display = ((item.style.display == "none") ? 'block' : 'none');
item.style.display = ((item.style.display == "none") ? displayType : 'none');
}
}
@ -35,4 +39,11 @@ function switchClasses(selector, class1, class2){
function toggleNav(){
toggleClass("nav", "open");
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;
}