Cara membuat scroll to top button di Next.js sebetulnya cukup sederhana, hampir sama seperti ketika membuatnya dengan vanilla JavaScript . Yang berbeda hanyalah penggunaan komponen dan beberapa sintaks. Bagaimana, sih, caranya? Yuk, kita ngobar (ngoding barbar). 😂
Goal-nya adalah membuat tombol yang menghilang saat layar masih di atas lalu muncul saat layar digulirkan ke bawah (scroll down). Ketika tombol tersebut diklik, layar akan kembali bergulir ke atas (scroll top).
Cara Membuat Fitur Scroll to Top Button di Next.js
Sebelum memulai, ada beberapa hal yang perlu digarisbawahi. Di tutorial ini saya menggunakan:
- Next.js app router v.14.
- Saya menggunakan folder src.
- Menggunakan JavaScript, bukan Typescript.
- Menggunakan HeroIcons sebagai komponen. Anda bisa menggunakan ikon apa saja, baik SVG langsung maupun sebagai komponen.
1. Buat komponen ScrollToTop.js
Pertama-tama, kita buat dulu komponen scroll to top button di direktori /src/components/. Buat file dengan nama ScrollToTop.js. Harap diingat bahwa naming convention atau aturan penamaan file komponen di React adalah Pascal Case. Nama file atau nama komponen bebas, yang penting masuk akal.
Untuk pengguna Tailwind, berikut script-nya:
"use client";
import { useState, useEffect } from "react";
import { ChevronUpIcon } from "@heroicons/react/24/solid";
const ScrollToTop = () => {
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
if (window.scrollY > 400) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => {
window.removeEventListener("scroll", toggleVisibility);
};
}, []);
return (
<button
type="button"
aria-label="Scroll to top"
onClick={scrollToTop}
className={`bg-insove-soft-blue text-insove-blue ${isVisible ? "opacity-100" : "opacity-0" fixed bottom-10 right-10 flex size-14 items-center justify-center rounded-full bg-opacity-50 transition-opacity duration-300 hover:bg-opacity-100}`}
>
<ChevronUpIcon className="size-6" />
</button>
);
};
export default ScrollToTop;
Perhatikan bahwa di baris pertama saya menambahkan "use client";. Itu karena sejak Next.js v.13 dan ada 2 router (App Router dan Pages Router), komponen terbagi 2: clients components yang dijalankan di sisi klien atau browser dan server components yang berjalan di sisi server.
Dalam hal ini, karena kita menggunakan useState dan useEffect, maka komponen tersebut berjalan di sisi klien dan perlu ditambahi use client. Kalau tidak, nanti eror.
Untuk Anda yang tidak menggunakan Tailwind, berikut kodenya.
"use client";
import { useState, useEffect } from "react";
import { ChevronUpIcon } from "@heroicons/react/24/solid";
import styles from "./ScrollToTop.module.scss"; // Ubah sesuai dengan lokasi file CSS Anda
const ScrollToTop = () => {
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
if (window.scrollY > 400) {
setIsVisible(true);
} else {
setIsVisible(false);
}
};
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
};
useEffect(() => {
window.addEventListener("scroll", toggleVisibility);
return () => {
window.removeEventListener("scroll", toggleVisibility);
};
}, []);
return (
<button
type="button"
aria-label="Scroll to top"
onClick={scrollToTop}
className={`${styles["button-scroll-to-top"]} ${isVisible ? styles.visible : ""}`}
>
<ChevronUpIcon className="size-6" />
</button>
);
};
export default ScrollToTop;
Berikut CSS-nya, sesuaikan warna dan ukuran button sesuai selera Anda:
.button-scroll-to-top {
position: fixed;
bottom: 40px;
right: 40px;
display: flex;
width: 3.5rem;
height: 3.5rem;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #f0f5ff;
color: #3b82f6;
background-opacity: 0.5;
transition: opacity 0.3s ease-in-out;
}
.button-scroll-to-top:hover {
background-opacity: 1;
}
.button-scroll-to-top.visible {
opacity: 1;
}
2. Import komponen
Import komponen yang tadi sudah kita buat di direktori /src/app/layout.js agar tombol scroll to top button ada di setiap halaman.
// Import di bagian atas
import ScrollToTop from "@/components/ScrollToTop";
export default function RootLayout({ children }) {
return (
<html lang="en" className="scroll-smooth">
<body className={poppins.className}>
{children}
{/* Letakkan komponen sebelum </body> */}
<ScrollToTop />;
</body>
</html>
);
}
Sebagai alternatif, jika Anda menggunakan partials, komponen ini bisa juga diletakkan di komponen footer.
3. Cek
Simpan semua perubahan lalu jalankan server. Cek apakah tombol sudah ada di setiap halaman dan berfungsi dengan baik atau belum.
Baiklah, sekian ngoding barbar kali ini. Semoga bermanfaat. (eL)
Langit Amaravati
Web developer, graphic designer, techno blogger.
Aktivis ngoding barbar yang punya love-hate relationship dengan JavaScript. Hobi mendengarkan lagu dangdut koplo dan lagu campursari. Jika tidak sedang ngoding dan melayout buku, biasanya Langit melukis, belajar bahasa pemrograman baru, atau meracau di Twitter.
