2024-04-20 10:10:34 +00:00
<!DOCTYPE html>
< html lang = "en" dir = "ltr" id = "page-top" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta property = "og:title" content = "Finally Beat A Bug's Life The Video Game — 24 Years Later | Blog" >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta name = "description" content = "My childhood goal of beating A Bug's Life video game was finally fulfilled." >
< meta name = "generator" content = "Eleventy v2.0.1" >
< meta property = "og:type" content = "website" >
< meta property = "og:url" content = "https://leilukin.neocities.org/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/" >
< meta property = "og:site_name" content = "Leilukin's Hub" >
< meta property = "og:locale" content = "en_MY" >
< meta property = "og:description" content = "My childhood goal of beating A Bug's Life video game was finally fulfilled." >
< meta name = "twitter:card" content = "summary" >
< meta name = "twitter:url" content = "https://leilukin.neocities.org/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/" >
< meta name = "twitter:description" content = "My childhood goal of beating A Bug's Life video game was finally fulfilled." >
< link rel = "canonical" href = "https://leilukin.neocities.org/blog/posts/2023-11-20-finally-beat-a-bugs-life-video-game-24-years-later/" >
2024-05-17 18:49:53 +00:00
< link rel = "stylesheet" href = "/assets/css/global.css" > < link rel = "stylesheet" href = "/assets/css/general.css" > < link rel = "stylesheet" href = "/assets/css/content.css" > < link rel = "stylesheet" href = "/assets/css/plugins.css" > < link rel = "stylesheet" href = "/assets/css/components.css" > < link rel = "stylesheet" href = "/assets/css/pridesymbols.css" > < link rel = "stylesheet" href = "/assets/css/utility.css" >
2024-05-17 18:35:26 +00:00
2024-04-20 10:10:34 +00:00
2024-05-20 04:17:51 +00:00
< link rel = "stylesheet" href = "/assets/fonts/lexend/lexend.css" >
2024-04-20 10:10:34 +00:00
< link href = "/assets/fonts/fontawesome/css/fontawesome.css" rel = "stylesheet" / >
< link href = "/assets/fonts/fontawesome/css/brands.css" rel = "stylesheet" / >
< link href = "/assets/fonts/fontawesome/css/solid.css" rel = "stylesheet" / >
< link rel = "apple-touch-icon" sizes = "180x180" href = "/assets/favicon/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" sizes = "32x32" href = "/assets/favicon/favicon-32x32.png" >
< link rel = "icon" type = "image/png" sizes = "16x16" href = "/assets/favicon/favicon-16x16.png" >
< link rel = "manifest" href = "/assets/favicon/site.webmanifest" >
< title >
Finally Beat A Bug' s Life The Video Game — 24 Years Later | Blog | Leilukin's Hub
< / title >
< / head >
< body >
< header class = "hero" >
< div class = "hero__top-bar hidden" > < / div >
< div class = "hero__img" >
2024-04-20 12:00:02 +00:00
< img fetchpriority = "high" src = "/assets/leilukin/Leilukins-Hub-website-banner.png" alt = "Banner of Leilukin's Hub" >
2024-04-20 10:10:34 +00:00
< / div >
< / header >
< style >
.hero {
width: 100%;
background-color: var(--clr-hero-bg);
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.hero__top-bar {
background-color: var(--clr-navbar-bg);
width: 100%;
2024-04-23 07:57:54 +00:00
padding: 0.5em 0.7em;
2024-04-20 10:10:34 +00:00
}
.hero__img {
display: grid;
place-content: center;
}
.hero img {
2024-04-20 11:43:13 +00:00
object-fit: contain;
2024-04-20 10:10:34 +00:00
overflow: hidden;
2024-04-20 11:43:13 +00:00
max-height: 16rem;
2024-04-26 16:12:13 +00:00
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
2024-04-20 10:10:34 +00:00
}
< / style >
< script defer >
const hero = document.querySelector(".hero");
const heroTopBarEl = document.querySelector(".hero__top-bar");
const headerImgEl = document.querySelector(".hero__img");
2024-04-29 03:16:44 +00:00
const todayEvent = getTodayEvent();
2024-04-29 05:07:49 +00:00
if (todayEvent) {
2024-04-20 10:10:34 +00:00
heroTopBarEl.classList.remove('hidden');
2024-04-29 05:07:49 +00:00
heroTopBarEl.innerHTML = todayEvent.blurb;
2024-04-20 10:10:34 +00:00
2024-04-29 05:07:49 +00:00
if (todayEvent.class) {
headerImgEl.classList.add(todayEvent.class);
2024-04-20 10:10:34 +00:00
}
}
function getTodayEvent() {
const date = new Date();
const month = date.getMonth() + 1;
const day = date.getDate();
2024-04-29 05:14:21 +00:00
const year = date.getFullYear();
2024-04-29 07:10:16 +00:00
const weekOfMonth = Math.ceil(day / 7);
2024-04-20 10:10:34 +00:00
2024-04-29 05:07:49 +00:00
const leilukinsHubLaunchDate = new Date("2022-09-11").getFullYear();
2024-04-29 05:14:21 +00:00
const siteAnniversary = year - leilukinsHubLaunchDate;
2024-04-29 05:07:49 +00:00
if (month === 3 & & day === 1)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.unaids.org/en/zero-discrimination-day" > Zero Discrimination Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-progress-intersex",
};
else if (month === 3 & & day === 8)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.internationalwomensday.com/" > International Women's Day}< / a > `,
2024-04-29 05:07:49 +00:00
class: "symbol-venus",
};
else if (month === 3 & & day === 31)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.manygendersonevoice.org/tdov.html" > Trans Day of Visibility< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-trans",
};
else if (month === 4 & & day === 6)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://internationalasexualityday.org/en" > International Asexuality Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-ace",
};
else if (month === 4 & & day === 26)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.lesbianvisibilityweek.com" > Lesbian Visibility Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-lesbian",
};
2024-04-29 07:10:16 +00:00
else if (month === 4 & & weekOfMonth === 4)
return {
2024-05-10 12:31:53 +00:00
blurb: `This week is < a href = "https://www.lesbianvisibilityweek.com" > Lesbian Visibility Week< / a > `,
2024-04-29 07:10:16 +00:00
class: "flag-lesbian",
};
2024-04-29 05:07:49 +00:00
else if (month === 5 & & day === 17)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://may17.org" > International Day Against Homophobia, Biphobia and Transphobia< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-progress",
};
else if (month === 5 & & day === 19)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.believeoutloud.com/voices/article/agender-pride-day/" > Agender Pride Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-agender",
};
else if (month === 5 & & day === 25)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://genderedintelligence.co.uk/panvisibilityday" > Pansexual and Panromantic Awareness and Visibility Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-pan",
};
else if (month === 6)
return {
2024-05-10 12:31:53 +00:00
blurb: `Happy < a href = "https://www.loc.gov/lgbt-pride-month/about/" > Pride Month< / a > !`,
2024-04-29 05:07:49 +00:00
class: "flag-progress-intersex",
};
else if (month === 7 & & day === 14)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.manygendersonevoice.org/non-binary-peoples-day.html" > Non-Binary People's Day< / a > `,
2024-04-29 08:47:49 +00:00
class: "flag-non-binary",
2024-04-29 05:07:49 +00:00
};
else if (month === 7 & & day === 28)
return {
blurb: `Today is Leilukin's Birthday`
};
2024-04-29 07:03:38 +00:00
else if (month === 8 & & day === 25)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://aromanticspectrumday.net/" > Aromantic Spectrum Visibility Day< / a > `,
2024-04-29 07:03:38 +00:00
class: "flag-aro",
};
2024-04-29 05:07:49 +00:00
else if (month === 9 & & day === 11)
return {
2024-04-29 05:14:21 +00:00
blurb: `Today is the ${siteAnniversary}-year anniversary of the launch of Leilukin' s Hub`
2024-04-29 05:07:49 +00:00
};
else if (month === 9 & & day === 23)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://bivisibilityday.com/about" > Bi Visibility Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-bi",
};
else if (month === 10 & & day === 8)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.lgbtiqhealth.org.au/international_lesbian_day2" > International Lesbian Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-lesbian",
};
else if (month === 10 & & day === 11)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://www.hrc.org/resources/national-coming-out-day" > National Coming Out Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-rainbow",
};
else if (month === 10 & & day === 17)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is the start of < a href = "https://www.grlgbtqhealthcareconsortium.org/significantdates/genderfluid-visibility-week" > Genderfluid Visibility Week< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-genderfluid",
};
else if (month === 10 & & day === 24)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is the start of < a href = "https://www.grlgbtqhealthcareconsortium.org/significantdates/ace-week" > Ace Week< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-ace",
};
else if (month === 10 & & day === 26)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is < a href = "https://interactadvocates.org/intersex-awareness-day" > Intersex Awareness Day< / a > `,
2024-04-29 05:07:49 +00:00
class: "flag-intersex",
};
2024-04-29 07:03:38 +00:00
else if (month === 11 & & day === 13)
return {
2024-05-10 12:31:53 +00:00
blurb: `Today is the start of < a href = "https://glaad.org/transweek/" > Transgender Awareness Week< / a > `,
2024-04-29 07:03:38 +00:00
class: "flag-trans",
};
2024-04-20 10:10:34 +00:00
else
2024-04-29 05:07:49 +00:00
return null;
2024-04-20 10:10:34 +00:00
}
< / script >
< nav class = "navbar" >
2024-05-10 09:06:10 +00:00
< button class = "navbar__toggle" aria-label = "Navigation menu toggle" >
< i class = "fa-solid fa-bars" > < / i >
2024-04-29 10:01:46 +00:00
< h2 class = "navbar__title" > Navigation< / h2 >
2024-05-10 09:06:10 +00:00
< / button >
2024-04-29 10:01:46 +00:00
< ul class = "navbar__links" >
2024-04-20 10:10:34 +00:00
< li >
2024-04-24 16:43:39 +00:00
< a href = "/" > Home< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/about/" > About< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/now/" > Now< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/blog/" > Blog< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/articles/" > Articles< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/projects/" > Projects< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/shrines/" > Shrines< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 16:43:39 +00:00
< a href = "/links/" > Links< / a >
2024-04-20 10:10:34 +00:00
< / li >
2024-05-14 16:58:48 +00:00
< li >
< a href = "/guestbook/" > Guestbook< / a >
< / li >
2024-04-20 10:10:34 +00:00
< / ul >
< / nav >
< style >
.navbar {
background: var(--clr-navbar-bg);
2024-04-29 10:01:46 +00:00
padding: 0.6em 1em;
2024-04-20 10:10:34 +00:00
width: 100%;
z-index: 999;
position: sticky;
top: 0;
}
2024-05-10 09:06:10 +00:00
.navbar__toggle,
.navbar__title {
color: var(--clr-navbar-link);
font-size: 1.3rem;
2024-04-29 10:01:46 +00:00
}
.navbar__toggle {
2024-05-10 09:06:10 +00:00
display: flex;
align-items: center;
gap: 0.5em;
2024-04-29 10:01:46 +00:00
border: none;
padding: 0;
margin: 0;
background-color: inherit;
}
2024-04-29 10:23:26 +00:00
.navbar__toggle:focus,
.navbar a:focus {
outline: 0.15em solid var(--clr-navbar-link);
}
2024-04-20 10:10:34 +00:00
.navbar a {
color: var(--clr-navbar-link);
text-decoration: none;
cursor: pointer;
}
.navbar a:hover {
color: var(--clr-link-hover);
}
.navbar a:focus {
outline-offset: 0.3em;
}
2024-04-29 10:01:46 +00:00
.navbar__links {
2024-04-20 10:10:34 +00:00
list-style: none;
2024-04-29 10:01:46 +00:00
display: none;
gap: 1em;
2024-05-10 09:07:17 +00:00
padding: 0.5em 1.8em;
2024-04-29 10:01:46 +00:00
overflow: auto;
2024-04-20 10:10:34 +00:00
}
2024-04-29 10:01:46 +00:00
.navbar__links--show {
display: grid;
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
.navbar {
padding: 0 0.6em;
}
2024-05-10 09:06:10 +00:00
.navbar__toggle {
2024-04-29 10:01:46 +00:00
display: none;
}
.navbar__links {
display: flex;
justify-content: space-evenly;
gap: 0.5em;
flex-wrap: wrap;
padding: 0;
2024-04-29 10:12:51 +00:00
overflow: unset;
2024-04-29 10:01:46 +00:00
}
}
2024-04-20 10:10:34 +00:00
< / style >
2024-04-29 10:01:46 +00:00
< script defer >
const navbarToggle = document.querySelector('.navbar__toggle');
const navbarLinks = document.querySelector(".navbar__links");
navbarToggle.addEventListener('click', () => {
navbarLinks.classList.toggle("navbar__links--show");
});
< / script >
2024-04-20 10:10:34 +00:00
< main >
< header class = "main__header" >
< ul class = "breadcrumbs" >
< li >
2024-04-24 17:42:28 +00:00
< a href = "/blog/" > Blog< / a >
2024-04-20 10:10:34 +00:00
< / li >
< li >
2024-04-24 17:42:28 +00:00
< a href = "/blog/posts/" > Blog Archive< / a >
2024-04-20 10:10:34 +00:00
< / li >
< / ul >
< h1 > Finally Beat A Bug' s Life The Video Game — 24 Years Later< / h1 >
< div class = "article__info" >
< p > Posted on 20 November 2023 by Leilukin
< p > Categories:
< a href = "/categories/life-updates" > life updates< / a >
< / p >
< p > 🍿 3 min. read< / p >
< / div >
< / header >
< div class = "content__wrapper" >
< article class = "article" >
< p > A Bug's Life was one of my favourite films in my childhood, to the extent I had lost count of how many times I rewatched it even just as a child alone by playing the CD on my house's television over and over. I was such a huge fan of A Bug's Life that I had also played its tie-in game, specifically the 3D action platformer game, and it became one of my childhood favourite video games as well.< / p >
< p > However, I had a regret relating to A Bug's Life the video game for years — I did not finish the game. I managed to reach Level 15, the final level of the game, but the reason I did not beat it was my CD-ROM of the game literally broke into pieces inside the CD-ROM drive, accompanied by a loud breaking sound, when I was playing Level 15, likely due to the CD-ROM being dislocated. It happened in 1999. Needless to say, the breaking of the CD-ROM of one of my childhood favourite video games broke my heart. My family and I had tried to look for a new copy of A Bug's Life video game, but with no success because at that time the stores in my local area no longer sold it.< / p >
< p > Over the years growing up, I still harbour nostalgia for A Bug's Life. While my love for the film had been tainted by the fact that < a href = "https://therottenappl.es/result/movie/9487/A-Bug's-Life" > both Kevin Spacey, who voiced Hopper, and John Lasseter, the director, were accused of sexual misconduct< / a > , my wish of being able to finish the tie-in video game myself lingered from time to time. I had watched playthrough videos of A Bug's Life video game on YouTube to help to fill the void, but it was not the same as playing the game myself. The main obstacle that prevented my wish from being fulfilled was the fact that it was a very old game that its PC version is no longer officially sold, not even on online game stores such as Steam and GOG. In other words, A Bug's Life the video game had become an abandonware. As a result, I sought out < a href = "https://www.myabandonware.com/" > My Abandonware< / a > , which does < a href = "https://www.myabandonware.com/game/disney-pixar-a-bug-s-life-h0q" > provide the game to download for free< / a > .< / p >
< p > From My Abandonware, I downloaded and installed the Full-Rip with dgVoodoo by Destabilize version of A Bug's Life video game on my Windows 11. I was delighted when I successfully launched and played the old childhood favourite video game for the first time. Soon, I searched for a save file of the PC version of A Bug's Life video game that unlocked all levels, and found it on < a href = "https://www.thetechgame.com/Downloads/id=62821/a-bugs-life.html" > The Tech Game< / a > . Finally, at long last, on 20 November 2023, after 24 years, I successfully beat A Bug's Life video game by myself. I did not aim for 100% completion because my main goal was to defeat Hopper, the final boss, myself.< / p >
< p > Given that the game was released in 1998, the graphics were obviously dated, and the camera and control were also awkward, but playing it again for the first time in decades brought back childhood memories of the game, and I still enjoy the game's soundtrack. This experience has also deepened my appreciation for internet archives, including ones that archive old video games. Thank you, My Abandonware, for allowing a childhood video game goal of mine got fulfilled decades later.< / p >
< ul class = "blog__post--nextprev" > < li > Previous Post: < a href = "/blog/posts/2023-11-19-i-can-finally-game-on-a-solid-state-drive/" > I Can Finally Game on a Solid-State Drive< / a > < / li > < li > Next Post: < a href = "/blog/posts/2024-03-06-i-received-a-lifetime-premium-membership-on-nexus-mods-for-free/" > I Received a Lifetime Premium Membership on Nexus Mods for Free< / a > < / li >
< / ul >
< style >
.blog__post--nextprev {
list-style: none;
padding-left: 0;
padding-top: 0.8em;
margin-top: 2.5em;
border-top: 0.1em solid var(--clr-title-border);
}
< / style >
< / article >
< aside class = "right-sidebar" >
< nav class = "content__nav sidebar--sticky" >
< h2 class = "content__nav--title" > My Contents< / h2 >
< ul class = "content__nav--links" >
2024-04-21 11:12:20 +00:00
< li > < a href = "/archive/" > Content Archive< / a > < / li >
2024-04-20 10:10:34 +00:00
2024-04-20 10:28:35 +00:00
< li > < a href = "/categories/" > Content Categories< / a > < / li >
2024-04-20 10:10:34 +00:00
< li > < a href = "/articles/" > Articles< / a > < / li >
< li > < a href = "/blog/posts/" > Blog Archive< / a > < / li >
2024-04-24 16:43:39 +00:00
< li > < a href = "/blog/" > Blog Home< / a > < / li >
2024-04-20 10:10:34 +00:00
< / ul >
< / nav >
< / aside >
< style >
.content__nav {
padding: 1.2em clamp(1em, 5%, 1.5em);
background-color: var(--clr-content-bg);
}
.content__nav--title {
font-size: 1.7rem;
}
< / style >
< / div >
< style >
.breadcrumbs {
list-style: none;
padding: 0;
margin: 0 0 0.7em 0;
display: flex;
gap: 0.5em;
flex-wrap: wrap;
justify-content: center;
}
2024-04-24 17:31:54 +00:00
.breadcrumbs li::after {
content: '➔';
padding-left: 0.3em;
}
2024-04-20 10:10:34 +00:00
< / style >
< / main >
< footer class = "footer" >
< p > Made with ♥ by Leilukin since < time > 11 September 2022< / time > < / p >
< ul class = "footer__links" >
2024-04-20 10:59:51 +00:00
< li > < a
href="/sitemap/
">Site Map< / a > < / li >
< li > < a
href="/changelogs/"
>Changelogs< / a > < / li >
2024-04-20 10:10:34 +00:00
< li > < a href = "/feed.xml" > RSS< / a > < / li >
< / ul >
< / footer >
< style >
.footer {
margin-top: auto;
2024-05-09 17:13:56 +00:00
width: 100%;
2024-04-20 10:10:34 +00:00
background: var(--clr-main-footer-bg);
2024-05-09 17:13:56 +00:00
padding: 1rem 1rem 3rem 1rem;
2024-04-20 10:10:34 +00:00
text-align: center;
display: grid;
}
.footer p {
padding: 0;
}
.footer__links {
justify-self: center;
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 0.7em;
}
2024-04-20 10:59:51 +00:00
.footer__links li:not(:last-child)::after {
content: '|';
padding-left: 0.6em;
}
2024-05-09 17:13:56 +00:00
/* Screen sizes larger than mobile */
@media only screen and (min-width: 30rem) {
.footer {
padding: 1rem 1rem 2rem 1rem;
}
}
/* Tablet screen size */
@media only screen and (min-width: 43.75rem) {
2024-04-20 10:10:34 +00:00
.footer {
2024-05-09 17:13:56 +00:00
padding: 1rem;
2024-04-20 10:10:34 +00:00
}
}
< / style >
2024-04-21 19:05:20 +00:00
< button class = "top-btn hidden" aria-label = "Scroll to top" >
< i class = "fa-solid fa-chevron-up" > < / i >
2024-04-20 10:10:34 +00:00
< / button >
< style >
.top-btn {
position: fixed;
2024-04-21 19:05:20 +00:00
margin: 0;
padding: 0;
2024-04-21 19:08:40 +00:00
bottom: 0.5rem;
right: 0.5rem;
2024-04-20 10:10:34 +00:00
z-index: 999;
border: none;
2024-04-21 19:05:20 +00:00
background-color: var(--clr-top-btn-bg);
color: var(--clr-top-btn-txt);
2024-04-20 10:10:34 +00:00
border-radius: 50em;
2024-04-21 19:08:40 +00:00
width: 2rem;
2024-04-21 19:05:20 +00:00
aspect-ratio: 1 / 1;
2024-04-20 10:10:34 +00:00
}
.top-btn:focus {
2024-04-21 19:05:20 +00:00
outline: 0.25em solid var(--clr-top-btn-bg);
2024-04-20 10:10:34 +00:00
outline-offset: 0.15em;
}
< / style >
< script defer >
const topButton = document.querySelector(".top-btn");
window.onscroll = () => {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
topButton.classList.remove("hidden");
} else {
topButton.classList.add("hidden");
}
}
topButton.addEventListener('click', () => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
});
< / script >
< / body >
< / html >