555 lines
23 KiB
HTML
555 lines
23 KiB
HTML
<!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="Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine">
|
|
|
|
<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="Walkthrough of how to redeem Bastila in the light side ending of Star Wars: Knights of the Old Republic.">
|
|
<meta name="generator" content="Eleventy v2.0.1">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://leilukin.neocities.org/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/">
|
|
<meta property="og:site_name" content="Leilukin's Hub">
|
|
<meta property="og:locale" content="en_MY">
|
|
<meta property="og:description" content="Walkthrough of how to redeem Bastila in the light side ending of Star Wars: Knights of the Old Republic.">
|
|
<meta name="twitter:card" content="summary">
|
|
<meta name="twitter:url" content="https://leilukin.neocities.org/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/">
|
|
<meta name="twitter:description" content="Walkthrough of how to redeem Bastila in the light side ending of Star Wars: Knights of the Old Republic.">
|
|
<link rel="canonical" href="https://leilukin.neocities.org/shrines/starwarskotor/guides/kotor-redeeming-bastila-guide/">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/css/main.css">
|
|
|
|
<link rel="stylesheet" href="/assets/css/starwarskotor.css">
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="/assets/fonts/noto-sans/noto-sans.css">
|
|
|
|
|
|
<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/starwarskotor/images/kotor-icon.png">
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/assets/starwarskotor/images/kotor-icon.png">
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/assets/starwarskotor/images/kotor-icon.png">
|
|
<link rel="manifest" href="/assets/favicon/site.webmanifest">
|
|
|
|
|
|
<title>
|
|
|
|
Redeeming Bastila Guide | Guides | Star Wars: Knights of the Old Republic Shrine | Leilukin's Hub
|
|
|
|
</title>
|
|
</head>
|
|
<body>
|
|
<header class="hero">
|
|
<div class="hero__top-bar hidden"></div>
|
|
<div class="hero__img">
|
|
|
|
<picture>
|
|
<source srcset="/assets/starwarskotor/images/swkotor-header-320.png" media="(orientation: landscape)" />
|
|
<img src="/assets/starwarskotor/images/swkotor-header.jpg" alt="anner of Star Wars: Knights of the Old Republic Shrine" />
|
|
</picture>
|
|
|
|
</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%;
|
|
padding: 0.5em 0;
|
|
}
|
|
|
|
.hero__img {
|
|
display: grid;
|
|
place-content: center;
|
|
}
|
|
|
|
.hero img {
|
|
object-fit: scale-down;
|
|
overflow: hidden;
|
|
filter: drop-shadow(0.1rem 0.1rem 0.2rem black);
|
|
max-height: 12rem;
|
|
}
|
|
</style>
|
|
|
|
<script defer>
|
|
const hero = document.querySelector(".hero");
|
|
const todayEvent = getTodayEvent();
|
|
const heroTopBarEl = document.querySelector(".hero__top-bar");
|
|
const headerImgEl = document.querySelector(".hero__img");
|
|
|
|
|
|
if (todayEvent != "No event") {
|
|
heroTopBarEl.classList.remove('hidden');
|
|
heroTopBarEl.innerHTML = getBlurbHtml(todayEvent);
|
|
}
|
|
|
|
function getTodayEvent() {
|
|
const date = new Date();
|
|
const month = date.getMonth() + 1;
|
|
const day = date.getDate();
|
|
|
|
if (month == 7 && day == 16)
|
|
return "KotOR 1 Anniversary";
|
|
else if (month == 12 && day == 6)
|
|
return "KotOR 2 Anniversary";
|
|
else
|
|
return "No event";
|
|
}
|
|
|
|
function getBlurbHtml(day) {
|
|
switch (day) {
|
|
case "KotOR 1 Anniversary":
|
|
return `
|
|
Today is the anniversary of the release of <cite>Star Wars: Knihgts of the Old Republic</cite>
|
|
`;
|
|
break;
|
|
case "KotOR 2 Anniversary":
|
|
return `
|
|
Today is the anniversary of the release of <cite>Star Wars: Knights of the Old Republic II — The Sith Lords</cite>
|
|
`;
|
|
break;
|
|
default:
|
|
return ``;
|
|
}
|
|
}
|
|
|
|
</script>
|
|
<nav class="navbar">
|
|
<ul class="nav__menu">
|
|
|
|
|
|
|
|
|
|
<li>
|
|
<a href="/shrines/starwarskotor/">Shrine Home</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/starwarskotor/articles/">Articles</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/starwarskotor/guides/">Guides</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/starwarskotor/resources/">Resources</a>
|
|
</li>
|
|
<li>
|
|
<a href="/shrines/starwarskotor/universes/">Universes</a>
|
|
</li>
|
|
<li><a href="/shrines/">Shrine Index</a></li>
|
|
<li><a href="/">Main Site</a></li>
|
|
|
|
</ul>
|
|
</nav>
|
|
|
|
<style>
|
|
.navbar {
|
|
background: var(--clr-navbar-bg);
|
|
padding: 0 0.6rem;
|
|
width: 100%;
|
|
z-index: 999;
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
.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;
|
|
outline: 0.15em solid var(--clr-navbar-link);
|
|
}
|
|
|
|
.nav__menu {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
</style>
|
|
|
|
<main>
|
|
<header class="main__header">
|
|
|
|
<ul class="breadcrumbs">
|
|
|
|
<li>
|
|
<a href="/shrines/" >Shrines</a>
|
|
</li>
|
|
➔
|
|
<li>
|
|
<a href="/shrines/starwarskotor/" >Star Wars: Knights of the Old Republic Shrine</a>
|
|
</li>
|
|
➔
|
|
<li>
|
|
<a href="/shrines/starwarskotor/guides/" >Guides</a>
|
|
</li>
|
|
➔
|
|
</ul>
|
|
|
|
|
|
|
|
<h1>Redeeming Bastila Guide</h1>
|
|
<div class="article__info">
|
|
<p>Posted on 16 September 2018 by Leilukin
|
|
|
|
|
|
<p>Categories:
|
|
|
|
<a href="/categories/star-wars-kotor">star wars kotor</a>
|
|
|
|
</p>
|
|
|
|
<p>🍿 6 min. read</p>
|
|
</div>
|
|
|
|
</header>
|
|
|
|
<div class="content__wrapper">
|
|
|
|
<aside class="left-sidebar">
|
|
<details class="toc__wrapper sidebar--sticky">
|
|
<summary class="toc__heading">
|
|
On This Page
|
|
</summary>
|
|
<nav class="toc">
|
|
<ol>
|
|
|
|
<li><a href="#introduction">Introduction</a>
|
|
</li>
|
|
|
|
<li><a href="#the-mechanics-of-redeeming-bastila">The Mechanics of Redeeming Bastila</a>
|
|
</li>
|
|
|
|
<li><a href="#dialogue-walkthrough">Dialogue Walkthrough</a>
|
|
|
|
<ol>
|
|
|
|
<li><a href="#phase-1">Phase 1</a>
|
|
</li>
|
|
|
|
<li><a href="#phase-2">Phase 2</a>
|
|
</li>
|
|
|
|
<li><a href="#phase-3">Phase 3</a>
|
|
</li>
|
|
|
|
<li><a href="#phase-4">Phase 4</a>
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</details>
|
|
</aside>
|
|
|
|
<style>
|
|
.toc__wrapper {
|
|
max-height: 89vh;
|
|
overflow: auto;
|
|
background-color: var(--clr-content-bg);
|
|
padding: 1rem 1.3rem;
|
|
}
|
|
|
|
.toc__heading {
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: var(--clr-sub-heading);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toc ol,
|
|
.toc ol ol {
|
|
display: grid;
|
|
gap: 0.3em;
|
|
}
|
|
|
|
.toc ol {
|
|
border-top: 0.1em solid var(--clr-title-border);
|
|
padding-left: 1.3em;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.toc ol ol {
|
|
border-top: none;
|
|
list-style-type: disc;
|
|
padding-left: 1em;
|
|
padding-top: 0.3em;
|
|
}
|
|
|
|
.toc ol a {
|
|
font-size: 1.1rem;
|
|
padding-left: 0.3em;
|
|
}
|
|
|
|
.toc ol ol a {
|
|
padding: 0;
|
|
font-size: 1rem;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<article class="article">
|
|
<p>[This guide is also available on <a href="https://docs.google.com/document/d/1HrrzojpHv9oekvDPjTmBAwdXTf6QhY8tC8RuioKFXmE/edit">Google Docs</a>]</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="introduction">Introduction</h2>
|
|
<a class="heading-anchor" href="#introduction" aria-labelledby="introduction"><span hidden>#</span></a></div>
|
|
<p>In Star Wars: Knights of the Old Republic, towards the end of the game you will be provided the opportunity to determine which ending you will get, and there will be consequences of your choice there.</p>
|
|
<p>Specifically, on the Rakatan temple summit at the Unknown World, you will meet Basila, who at that point has fallen to the dark side. After some dialogue and you fought Bastila, Bastila will suggest you to reclaim the title of the Dark Lord of the Sith and rule the galaxy. If you choose to agree with Bastila's suggestion, you will get the dark side ending, with a lot of dark side points. However, if you choose to reject Bastila's suggestion, you will get the light side ending, with a lot of light side points.</p>
|
|
<p>If you choose the light side ending, you will face the fallen Bastila again in the Star Forge. Depending on your dialogue choices, you will either successfully convince Bastila to return to the light side, or you kill her if you fail to do so.</p>
|
|
<p>This guide will provide in-depth details on how the mechanics of redeeming Bastila on the Star Forge works, and which dialogue options will give you a better chance in successfully redeeming Bastila.</p>
|
|
<p>For this guide, I have used KotOR Tool, DLGEditor and DeNCS to investigate the relevant dialogue file and scripts.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="the-mechanics-of-redeeming-bastila">The Mechanics of Redeeming Bastila</h2>
|
|
<a class="heading-anchor" href="#the-mechanics-of-redeeming-bastila" aria-labelledby="the-mechanics-of-redeeming-bastila"><span hidden>#</span></a></div>
|
|
<p>The game uses a point system to determine if you will succeed in redeeming Bastila based on the amount of points you earn throughout the conversations when you face Bastila on the Star Forge. Some dialogue options will earn you points to increase your chance in redeeming Bastila.</p>
|
|
<p>In general, to successfully convince Bastila to return to the light side, you need to choose dialogue options that say you believe that Bastila still has the light side in her, that she can be saved, tell her about the dangers of the dark side or remind her about the Jedi's teaching, and choose these options as much as possible.</p>
|
|
<p>In the final part of Bastila's dialogue, when Bastila says she is beyond saving, do not agree with her because it will make you kill her.</p>
|
|
<p>There will be [Persuade] options in the final part of Bastila's dialogue. While it is possible to save Bastila without choosing the [Persuade] options as long as you choose the right dialogue options, if you invest skill points in Persuade and pass the Persuade check, it would also be easier to save Bastila. If you want to learn more about the Persuade mechanic in KotOR, you can check out <a href="https://strategywiki.org/wiki/Star_Wars:_Knights_of_the_Old_Republic/Skills#Persuade">this page</a>.</p>
|
|
<p>An active romance with Bastila will make it easier to save Bastila. Although in vanilla KotOR, only a male player character can romance Bastila, this mechanic also works for a female PC who romances Bastila with mods like <a href="https://deadlystream.com/files/file/1548-jcs-romance-enhancement-biromantic-bastila-for-k1/">JC's Romance Enhancement: Biromantic Bastila</a>. That said, it is possible to redeem Bastila even if you do not romance her.</p>
|
|
<div class="heading-wrapper h2">
|
|
<h2 id="dialogue-walkthrough">Dialogue Walkthrough</h2>
|
|
<a class="heading-anchor" href="#dialogue-walkthrough" aria-labelledby="dialogue-walkthrough"><span hidden>#</span></a></div>
|
|
<p>There are 4 phases in your conversation with Bastila in the Star Forge, as each phase will end with you and Bastila fight, and Bastila will initiate new dialogue each time you defeat her. There are dialogue options in each phase that will increase your points in your chance to save Bastila.</p>
|
|
<p>Below is a full walkthrough of the dialogue options that will maximize your points to successfully redeem Bastila.</p>
|
|
<div class="heading-wrapper h3">
|
|
<h3 id="phase-1">Phase 1</h3>
|
|
<a class="heading-anchor" href="#phase-1" aria-labelledby="phase-1"><span hidden>#</span></a></div>
|
|
<p>Once you find Bastila in the Star Forge, Bastila will start the conversation by saying, "Revan - I knew you'd come for me." When you are provided with dialogue options:</p>
|
|
<ul>
|
|
<li>Choose the <strong>"I'll never give up on you, Bastila. I know you can still be saved."</strong> option to gain 2 points.</li>
|
|
</ul>
|
|
<p>Regardless of your dialogue choice here, you and Bastila will fight.</p>
|
|
<div class="heading-wrapper h3">
|
|
<h3 id="phase-2">Phase 2</h3>
|
|
<a class="heading-anchor" href="#phase-2" aria-labelledby="phase-2"><span hidden>#</span></a></div>
|
|
<p>After you defeat Bastila for the first time, Bastila will initiate conversation again by saying, "I see now why Malak followed you...". After Bastila says, "You were a fool to give it all up and follow the light side.":</p>
|
|
<ul>
|
|
<li>Choose either <strong>"I am as strong in the light as I ever was following the dark side."</strong> or <strong>"You've been consumed by the dark side, Bastila. Can't you see it's destroying you?"</strong> to gain 1 point.</li>
|
|
</ul>
|
|
<p>If you choose either of the above options, Bastila will argue. When she says "Eventually there will be no limit to what I can accomplish with the Force!":</p>
|
|
<ul>
|
|
<li>Choose <strong>"You will accomplish death and destruction with the dark side, nothing else."</strong> to gain 1 point. If you choose this option or <em>"Malak will never let you become that powerful. He will kill you first."</em> (Note: this option does not give you any points), Bastila will argue again, choose <strong>"You're dooming yourself to an endless cycle of death and betrayal."</strong> to gain 1 point.</li>
|
|
</ul>
|
|
<p>You and Bastila will fight again.</p>
|
|
<div class="heading-wrapper h3">
|
|
<h3 id="phase-3">Phase 3</h3>
|
|
<a class="heading-anchor" href="#phase-3" aria-labelledby="phase-3"><span hidden>#</span></a></div>
|
|
<p>After you defeat Bastila for the second time, Bastila will say, "You are growing weary, I can sense it!" After she says "... Soon this will all be over!":</p>
|
|
<ul>
|
|
<li>Choose <strong>"Your emotions get the better of you, Bastila. Remember the Jedi code."</strong> to gain 1 point.</li>
|
|
<li>Alternately, choose <strong>"Then strike me down, Bastila. I won't defend myself."</strong> to gain 2 points. Any of the dialogue options following this will gain another 2 points. Specifically:
|
|
<ul>
|
|
<li><strong>"Remember what you once were, Bastila. A Jedi would never strike down a defenseless opponent."</strong></li>
|
|
<li><strong>"You are not evil, Bastila. You will not strike down a defenseless opponent."</strong></li>
|
|
<li>If you romance Bastila, you have an additional option: <strong>"We meant something to each other, once. I don't believe you will strike me down."</strong></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<p>You and Bastila will fight again.</p>
|
|
<div class="heading-wrapper h3">
|
|
<h3 id="phase-4">Phase 4</h3>
|
|
<a class="heading-anchor" href="#phase-4" aria-labelledby="phase-4"><span hidden>#</span></a></div>
|
|
<p>After you defeat Bastila for the last time, and Bastila questions, "Why can't I defeat you?":</p>
|
|
<ul>
|
|
<li>Choose <strong>"Now you see the dark side is not stronger than the light."</strong> to gain 1 point.</li>
|
|
</ul>
|
|
<p>Later when Bastila says "End my life quickly. There is no other way.", choose <strong>"I could never kill you, Bastila."</strong> if you romance her, or <strong>"There's no need for me to kill you, Bastila."</strong> if you do not.</p>
|
|
<p>After Bastila says "You cannot let me live", choose <strong>"You can reject the dark side, Bastila. Return to the light."</strong> to gain 2 points.</p>
|
|
<p>When Bastila says, "I can no longer find peace in the Force":</p>
|
|
<ul>
|
|
<li>
|
|
<p>Choose the [Persuade] option. The [Persuade] options are different depending on if you romance Bastila or not.</p>
|
|
<ul>
|
|
<li>If romanced, choose <strong>"[Persuade] Use our bond, then. Take your strength from me."</strong> Succeeding in this persuasion option requires an Easy Persuade check. If you pass the check, you will gain 2 points. Later, choose <strong>"[Persuade] I love you, Bastila. I can't abandon you, ever."</strong> Again, succeeding in this persuasion option requires an Easy Persuade check. If you pass the check, you will gain 5 points.</li>
|
|
<li>If not romanced, choose <strong>"[Persuade] Turn to the Jedi code, Bastila. It can help you."</strong> This requires a Medium Persuade check. If you pass the check, you will gain 2 points. Later, choose <strong>"[Persuade] Look into your heart, Bastila, and you will find the light."</strong> Again, succeeding in this persuasion option requires a Medium Persuade check. If you pass the check, you will gain 3 points.</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<p>Alternately, if you are worried that you may fail the [Persuade] check, you can choose <strong>"I was redeemed, Bastila. You can be, too."</strong> to add 1 point. When Bastila responses with "I was supposed to protect you from the dark side", choose <strong>"You can't protect someone from the dark side. Each individual must choose their own path."</strong> to add 1 point, or if you romance her, choose <strong>"You did more than protect me, Bastila."</strong> to gain 1 point. Note that these dialogue options were also available after you choose the [Persuade] options, so if you want to gain the maximum amount of points, you may choose all these options.</p>
|
|
</li>
|
|
</ul>
|
|
<p>If you want to redeem Bastila, eventually you need to choose <strong>"Help us defeat the Sith, Bastila. This will atone for what you have done."</strong> and then <strong>"I trust you enough to leave myself open to your attack, Bastila."</strong>.</p>
|
|
<p>If you have gained <strong>at least 10 points in total</strong>, Bastila will respond with <strong>"You are brave... and some would say foolish. But you are also right. The dark side has not wholly consumed me. I cannot raise my blade against you."</strong> If Bastila says this to you, congratulations! You have saved her!</p>
|
|
<p>From this point, regardless of your dialogue option, Bastila will stay behind and use her Battle Meditation to help the Republic, while you go to face Darth Malak alone.</p>
|
|
|
|
</article>
|
|
|
|
|
|
|
|
|
|
<aside class="right-sidebar">
|
|
<div class="shrine__info sidebar--sticky">
|
|
<h2>About</h2>
|
|
|
|
<p>Welcome to Leilukin's shrine for <cite>Star Wars: Knights of the Old Republic</cite>, a series of role-playing video games set in the <cite>Star Wars</cite> universe, taking place almost 4,000 years before the events of the Skywalker film saga.</p>
|
|
|
|
<h3>Links</h3>
|
|
<ul>
|
|
|
|
<li><a href="https://kotor.neocities.org/" target="_blank">KOTOR Community Portal</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</aside>
|
|
|
|
<style>
|
|
.right-sidebar {
|
|
background-color: var(--clr-content-bg);
|
|
font-size: clamp(0.9rem, 0.9rem + 3vw, 1rem);
|
|
}
|
|
|
|
.shrine__info {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.shrine__info h2 {
|
|
font-size: clamp(1.5rem, 1rem + 3vw, 1.7rem);
|
|
margin-bottom: 0.2em;
|
|
}
|
|
|
|
.shrine__info h3 {
|
|
font-size: clamp(1.3rem, 1rem + 3vw, 1.5rem);
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.shrine__info ul {
|
|
margin-top: 0.5em;
|
|
}
|
|
</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;
|
|
}
|
|
</style>
|
|
</main>
|
|
<footer class="footer">
|
|
|
|
<p>Made with ♥ and the Force by Leilukin | Shrine Launched: 17 February 2023</p>
|
|
<p>Back to: <a href="/shrines/">Shrine Index</a> | <a href="/">Leilukin's Hub</a></p>
|
|
|
|
</footer>
|
|
|
|
<style>
|
|
.footer {
|
|
margin-top: auto;
|
|
background: var(--clr-main-footer-bg);
|
|
padding: 0.8rem;
|
|
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;
|
|
}
|
|
|
|
.footer__links li:not(:last-child)::after {
|
|
content: '|';
|
|
padding-left: 0.6em;
|
|
}
|
|
|
|
@media only screen and (min-width: 600px) {
|
|
.footer {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
<button class="top-btn hidden">
|
|
<img src="/assets/images/elements/chevron-up.svg" alt="Scroll to top">
|
|
</button>
|
|
|
|
<style>
|
|
.top-btn {
|
|
position: fixed;
|
|
bottom: 10px;
|
|
right: 10px;
|
|
z-index: 999;
|
|
border: none;
|
|
background-color: var(--clr-top-btn);
|
|
border-radius: 50em;
|
|
padding: 0.3em;
|
|
}
|
|
|
|
.top-btn:focus {
|
|
outline: 0.25em solid var(--clr-top-btn);
|
|
outline-offset: 0.15em;
|
|
}
|
|
|
|
.top-btn img {
|
|
width: 1.5rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
</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> |