improved scroll
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Samuel Philipp 2023-05-10 19:40:01 +02:00
parent b97eb40517
commit d2d7910d52
2 changed files with 64 additions and 13 deletions

View file

@ -38,7 +38,7 @@ title: {{site.title}}
src="https://umami.sp-codes.de/umami.js"></script>
</head>
<body>
<header class="vh-100">
<header id="top" class="vh-100">
<div class="overlay"></div>
<div class="container">
<div class="row justify-content-md-center">
@ -49,8 +49,7 @@ title: {{site.title}}
{%- for key in site.menu.items %}
<div class="item">
<a href="#{{ key }}">
{% if entry.icon %}<span class="{{ entry.icon }} me-1"></span>{% endif %}{{
site.strings[key].title }}
{{ site.strings[key].title }}
</a>
</div>
{%- endfor %}
@ -83,10 +82,7 @@ title: {{site.title}}
</ul>
</div>
<div class="d-flex justify-content-center">
<a class="scroll-down" href="#about" onclick="window.location.hash=''">
<svg fill="#fff" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<path d="M128,188a11.96187,11.96187,0,0,1-8.48535-3.51465l-80-80a12.0001,12.0001,0,0,1,16.9707-16.9707L128,159.0293l71.51465-71.51465a12.0001,12.0001,0,0,1,16.9707,16.9707l-80,80A11.96187,11.96187,0,0,1,128,188Z"></path>
</svg>
<a class="scroll-down" href="#about">
<span class="d-none">Scroll Down</span>
</a>
</div>
@ -342,5 +338,17 @@ title: {{site.title}}
</div>
</div>
</footer>
<a class="back-top" href="#top">^</a>
<script>
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
</script>
</body>
</html>