banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add scroll to top button - landing page

main-dlh
shola 2025-12-04 14:19:16 +07:00
parent dd950435f7
commit 9e891fe774
No known key found for this signature in database
GPG Key ID: FA9358FFDCCD05D9
2 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Views/Home/Index.cshtml
View File

@ -214,7 +214,7 @@
<!-- Regulation Section -->
<section class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
<section id="pergub" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
<div class="w-full mx-auto">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 xl:gap-20 items-start">
<!-- Content Section -->
@ -425,6 +425,13 @@
</div>
</section>
<!-- Scroll to Top Button -->
<button id="scrollToTop"
class="fixed bottom-8 cursor-pointer
right-8 text-lg w-12 h-12 bg-primary-700 hover:bg-primary-800 text-white rounded-full shadow-lg flex items-center justify-center transition-all duration-300 opacity-0 invisible z-50">
<i class="ph ph-arrow-up text-2xl"></i>
</button>
<!-- Contact Section -->
<section id="kontak" class="w-full px-4 lg:px-28 xl:px-48 py-16 lg:py-24 bg-gray-100">
<div class="w-full mx-auto">
@ -522,6 +529,26 @@
}
</style>
<script>
// Scroll to Top Button
const scrollToTopBtn = document.getElementById('scrollToTop');
window.addEventListener('scroll', function() {
if (window.pageYOffset > 300) {
scrollToTopBtn.classList.remove('opacity-0', 'invisible');
scrollToTopBtn.classList.add('opacity-100', 'visible');
} else {
scrollToTopBtn.classList.remove('opacity-100', 'visible');
scrollToTopBtn.classList.add('opacity-0', 'invisible');
}
});
scrollToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {

7
Views/Shared/Layouts/Landing/_Navbar.cshtml
View File

@ -15,7 +15,7 @@
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
Tentang
</a>
<a href="#"
<a href="#pergub"
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg transition-colors">
Regulasi
</a>
@ -56,9 +56,12 @@
class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
Tentang
</a>
<a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
<a href="#pergub" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
Regulasi
</a>
<a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
Panduan
</a>
<a href="#" class="px-4 py-2 text-slate-600 text-base font-medium font-jakarta hover:bg-gray-50 rounded-lg">
Edukasi
</a>