HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<header>
<a href="#" class="home">🏠</a>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</nav>
</header>
<main id="maincontent">
<a href="#" class="top-link" aria-label="Go to top" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="black" role="presentation">
<path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd" />
</svg>
</a>
<article>
<h1>Smart "back to top" button (link)</h1>
<div class="details">
<svg class="author-img" viewBox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c1.66 0 3 1.34 3 3s-1.34 3-3 3-3-1.34-3-3 1.34-3 3-3zm0 14.2c-2.5 0-4.71-1.28-6-3.22.03-1.99 4-3.08 6-3.08 1.99 0 5.97 1.09 6 3.08-1.29 1.94-3.5 3.22-6 3.22z" />
</svg>
<span class="author">Rob O'Leary</span>
<span class="publish-date">| Published on Apr. 16, 2022</span>
</div>
<img src="https://images.unsplash.com/photo-1615270445011-02104672f6f4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1048&q=80" alt="coding" />
<p>
<strong>Scroll down at least a screen, and then scroll up. You will see the
"back to top" appear in the bottom-right corner.</strong>
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Talking about code here. Aliquip est reprehenderit officia laborum
esse ea aute fugiat labore.Culpa enim labore culpa sit enim irure.
Sunt elit voluptate mollit enim sunt aute consectetur. Officia fugiat
occaecat sit minim consectetur officia labore amet nisi do. Sint ad
aliquip labore enim laboris
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Autem nobis
ex voluptate aliquam, dicta nam cupiditate veniam rem? Maiores velit
voluptates placeat distinctio quisquam, eveniet qui reiciendis
voluptas ex ipsum.
</p>
<p>
Placeat eligendi sint similique neque quas. Inventore distinctio sit
porro expedita omnis repellendus neque accusamus perferendis, iure
alias sunt? Dicta nesciunt necessitatibus id aliquam. Exercitationem
laudantium ratione debitis suscipit natus.
</p>
<p>
Neque sit obcaecati pariatur amet porro nam non eligendi quis ducimus
impedit consectetur, est quisquam facilis cum quaerat dolore minima
dolorum enim ab quam totam quae sint suscipit voluptas. Sequi!
</p>
<p>
Nobis, provident possimus. Commodi asperiores, omnis repellat alias
mollitia, excepturi ullam consectetur amet a maiores harum numquam
quam eaque aliquid praesentium, voluptatem quibusdam natus ipsam
delectus unde adipisci! Voluptas, ab.
</p>
<p>
Veritatis, doloribus cum sequi minima quis molestias illum
reprehenderit odit libero suscipit quaerat voluptates maxime excepturi
dicta exercitationem reiciendis accusantium adipisci numquam corrupti
quia recusandae aspernatur in iure error! Illum?
</p>
<p>
Impedit, quos minima ullam quasi deserunt adipisci minus labore? Ullam
facere vitae nulla iure officiis. Vero, rem quaerat maxime quasi
sapiente voluptatibus nesciunt reprehenderit voluptatum a deleniti
est, facere quam.
</p>
<p>
Quia corrupti a quo quisquam voluptatem, voluptatum tempora placeat
aliquid labore commodi! Ea laborum veniam hic porro ut laboriosam
nesciunt ratione natus, tempore libero? Nisi quibusdam nobis qui alias
nesciunt.
</p>
<p>
Eum praesentium libero repellat repellendus officia culpa sit porro
veniam quae nihil iusto vero optio temporibus a dolorum aspernatur
distinctio illum quaerat quas, voluptas magnam ut cupiditate
blanditiis saepe. Eius!
</p>
<p>
Neque quasi suscipit laboriosam doloribus ad. Veritatis commodi beatae
nisi quo. Asperiores nisi ex tenetur ullam, consequuntur saepe ducimus
repudiandae voluptate maiores ab quasi libero sed pariatur optio,
laboriosam accusantium.
</p>
<p>
Repellendus, amet? Ab, esse fugiat nisi ad placeat hic facilis iste
ullam natus quidem. Quae atque voluptas modi aperiam in qui dolore aut
nulla architecto, exercitationem voluptatum. Exercitationem, atque
dolore.
</p>
<p>
Eligendi aliquam totam laborum, eveniet fugiat dignissimos, dicta
deleniti, fuga amet accusamus quae sequi. Repudiandae nam repellendus
consequatur fugit et, commodi beatae iure dolore! Commodi accusamus
similique nesciunt laboriosam! Sunt.
</p>
<p>
Vero molestiae maiores nemo voluptatem cupiditate eaque eos quas
dolore natus tempore quo mollitia saepe inventore, dolores deleniti
esse assumenda incidunt voluptatum magnam repudiandae, facilis iure
est. Qui, assumenda voluptate?
</p>
<p>
Asperiores dolorem tempore a, delectus nobis aperiam incidunt sequi
deserunt veritatis porro, corrupti officia. Modi repellendus pariatur
eligendi rerum velit non earum facilis, veniam vitae magni sit
accusantium nobis accusamus.
</p>
<p>
Laboriosam voluptate odit harum voluptatibus ipsum necessitatibus, cum
libero voluptas et, cumque numquam amet doloribus vitae velit quia
ipsam? Impedit illo aspernatur fugiat, necessitatibus velit optio
tempora ex deserunt nisi!
</p>
<p>
Fugit ea commodi aliquid! Maxime pariatur maiores quidem ratione,
numquam culpa est dolores autem dolorum facere nemo, voluptatibus
consequatur earum totam quod ipsum dolor necessitatibus fuga repellat
repellendus perferendis et.
</p>
<p>
Aliquam accusamus rerum nihil reiciendis eos, dicta praesentium eum.
Tempore provident eligendi numquam, eum eaque libero recusandae
praesentium aut asperiores voluptas facilis dolor quos alias ut
aliquid repellendus totam. In.
</p>
<p>
Quasi hic, aliquam dicta minima rerum adipisci necessitatibus neque
rem quae at numquam cumque ad ullam, accusantium corporis, nostrum
aspernatur. Autem, tenetur. Aliquid maiores sequi architecto dicta
labore incidunt debitis.
</p>
<p>
Recusandae dicta nostrum distinctio suscipit. Maiores doloremque
tempore maxime cupiditate illum praesentium, voluptate, quos, sapiente
excepturi saepe dignissimos repudiandae laudantium soluta quae ipsam.
Illo, quas asperiores. Nisi aspernatur quae ipsa!
</p>
<p>
Maiores nostrum ducimus assumenda ea reprehenderit. A rem nihil
labore. Dolore provident incidunt expedita sapiente, explicabo omnis
hic ab adipisci, suscipit, quos iusto est aliquid. Numquam ipsam nulla
id nobis?
</p>
<p>
Dolore perferendis, non hic quo deserunt ratione, velit recusandae
impedit, eligendi porro vero. Eligendi quam dolor iusto libero ipsa
laudantium fugiat quis aliquam inventore ullam debitis, possimus
voluptas rem mollitia.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad provident
maxime tempora? Facere, in rerum iste laborum recusandae aspernatur
earum, expedita eum deserunt, sint architecto quia amet. Culpa,
officiis ipsam!
</p>
<p>
Dolorum alias praesentium perspiciatis odit quo nihil, consequatur
consequuntur numquam accusantium non, atque saepe ducimus aspernatur
tempora est doloremque omnis ipsa obcaecati quam. Qui aliquid impedit
expedita? Molestiae, itaque minus.
</p>
<p>
Quaerat, dolores. Tempore, consectetur. Omnis modi consequuntur, quae
rerum aliquam rem architecto quis beatae numquam? Consequatur
quibusdam placeat dolores consequuntur voluptate. Quod, ipsum neque
fugiat quisquam ducimus ipsa perspiciatis voluptatum?
</p>
<p>
Distinctio consequatur optio repellendus repudiandae animi odio
quibusdam vel quas sequi, ratione natus dolor ab atque provident.
Architecto quod autem reprehenderit quisquam eaque nostrum cupiditate
harum illum magnam. Esse, reprehenderit.
</p>
<p>
Maiores perspiciatis beatae necessitatibus! Magnam doloremque ut,
inventore consequatur minus reiciendis esse dolorum quod delectus!
Veniam, dolore saepe quo ullam illo, quisquam quae, placeat aliquid
sunt vitae quod delectus? Dolor?
</p>
<p>
Ex aliquid sapiente facilis repudiandae natus! Perspiciatis eos
accusamus dolorum blanditiis ullam corrupti quidem dignissimos,
aspernatur, consequatur, earum doloremque dolor cum beatae.
Consectetur culpa ipsum quo, deserunt voluptate nihil ex!
</p>
<p>
Natus labore maiores voluptates atque excepturi fugiat ex culpa
laudantium eius vero nulla reiciendis voluptate aliquid cupiditate
reprehenderit tempora earum et quod, sunt eum odio vel, sint officia
nostrum? Hic?
</p>
<p>
Dolorem accusamus animi sapiente eos facilis assumenda aliquid, a
magnam, hic incidunt labore tempora, nostrum blanditiis facere soluta
repellendus architecto sint placeat optio dolores ducimus laboriosam?
Exercitationem ad quae corrupti.
</p>
<p>
Tenetur quaerat iste dolores odio perferendis neque consectetur quae
commodi fuga, laboriosam amet placeat ipsam incidunt debitis tempore a
aperiam inventore obcaecati illo rem. Accusantium ab quas ipsum
laborum similique?
</p>
<p>
Ratione sed nam molestiae nemo. Animi sed exercitationem unde, commodi
fugiat laboriosam velit illum obcaecati doloremque veniam quod dicta
harum, incidunt expedita iste, deserunt quisquam cumque explicabo
sequi tempora excepturi?
</p>
<p>
Iure rerum fuga culpa quam non aut quidem deserunt magni temporibus
dolores, sed, nisi corporis omnis architecto dicta delectus quis
laboriosam cumque dolor dolorum! Suscipit voluptatum eos dolorem
sapiente eveniet?
</p>
<p>
Necessitatibus incidunt quis dolorum consequatur cupiditate hic magni
earum, possimus eum. Deleniti, libero. Corporis rerum suscipit,
delectus minima ab animi quia ipsam repellendus reiciendis perferendis
eius molestias laboriosam blanditiis mollitia!
</p>
<p>
Quas aliquam magnam quaerat suscipit, dolorem distinctio excepturi
nobis soluta officiis laudantium temporibus cum itaque nam quos
aliquid similique modi voluptate, error vel, tenetur corrupti. Saepe
nulla deserunt natus iure.
</p>
<p>
Hic nobis minus vero, quisquam voluptates reiciendis laudantium alias.
Distinctio, repellat magnam nam rerum quidem provident sit ipsam
blanditiis animi a autem sunt, eius similique beatae quia. Quia, quos
voluptatibus.
</p>
<p>
Ea vero consequatur qui earum doloribus fugiat ex? Omnis vero
voluptatem consequuntur mollitia doloribus non et voluptates nemo
tempora molestiae doloremque nulla unde rem at iusto, totam quidem
deserunt voluptate.
</p>
<p>
Similique nisi enim voluptate quaerat consequuntur eligendi, magni
facere alias eveniet rem amet. Quidem, ipsam error veniam molestiae
numquam qui labore voluptate soluta inventore quod rem magnam libero,
dolorem laborum?
</p>
<p>
Debitis, velit quibusdam! Error sed rerum quia rem dolore magnam at
impedit nulla. Aut dolore, ratione voluptatum dolor possimus facere
nihil, blanditiis distinctio corrupti consectetur doloremque error
voluptates molestias praesentium!
</p>
<p>
Totam cum hic error libero iusto recusandae nostrum, iure autem fugit
beatae quis modi facere voluptatibus consequuntur, quia sed vero at
officiis voluptas sint magnam. Quo deserunt deleniti temporibus dicta?
</p>
<p>
Laudantium labore impedit suscipit quidem consequatur illo molestiae
animi tempore! Voluptatum fugiat modi aut ducimus minima facilis,
iste, cum laborum quis vero alias, perferendis nulla? Voluptatem
corrupti maiores corporis rerum?
</p>
<p>
Necessitatibus esse nisi provident cumque vero est expedita iusto
earum vel temporibus harum non officia ipsam, eveniet saepe. Quas qui
sunt dolor natus quam a sapiente, libero voluptatibus itaque eligendi!
</p>
</article>
</main>
<footer>
<nav aria-label="Footer navigation">
<div class="footer-links">
<ul>
<li>
<h2>What we do</h2>
</li>
<li><a href="/newsletters/">Newsletters</a></li>
<li><a href="/community/">Forums</a></li>
</ul>
<ul>
<li>
<h2>About</h2>
</li>
<li><a href="/about-us/">Our story</a></li>
<li><a href="/legals/">Terms of use</a></li>
<li><a href="/privacy-policy/">Privacy policy</a></li>
<li>
<a href="#">Corporate memberships</a>
</li>
</ul>
<ul>
<li>
<h2>Contact</h2>
</li>
<li><a href="/contact-us/">Contact us</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="/write-for-us/">Write an article for us</a></li>
<li>
<a href="#/" target="_blank">Advertise</a>
</li>
</ul>
<ul class="social">
<li>
<h2>Connect</h2>
</li>
<li>
<a href="#" rel="noopener noreferrer" target="_blank" aria-label="See facebook account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-square" class="social-icon fa-facebook-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48A48 48 0 0 0 0 80v352a48 48 0 0 0 48 48h137.25V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.27c-30.81 0-40.42 19.12-40.42 38.73V256h68.78l-11 71.69h-57.78V480H400a48 48 0 0 0 48-48V80a48 48 0 0 0-48-48z"></path>
</svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See twitter account"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter-square" class="social-icon fa-twitter-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg></a><a href="#" rel="noopener noreferrer" target="_blank" aria-label="See RSS feed"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="rss-square" class="social-icon fa-rss-square fa-w-14 fa-lg" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM112 416c-26.51 0-48-21.49-48-48s21.49-48 48-48 48 21.49 48 48-21.49 48-48 48zm157.533 0h-34.335c-6.011 0-11.051-4.636-11.442-10.634-5.214-80.05-69.243-143.92-149.123-149.123-5.997-.39-10.633-5.431-10.633-11.441v-34.335c0-6.535 5.468-11.777 11.994-11.425 110.546 5.974 198.997 94.536 204.964 204.964.352 6.526-4.89 11.994-11.425 11.994zm103.027 0h-34.334c-6.161 0-11.175-4.882-11.427-11.038-5.598-136.535-115.204-246.161-251.76-251.76C68.882 152.949 64 147.935 64 141.774V107.44c0-6.454 5.338-11.664 11.787-11.432 167.83 6.025 302.21 141.191 308.205 308.205.232 6.449-4.978 11.787-11.432 11.787z"></path>
</svg></a>
</li>
</ul>
</div>
<p class="copyright">
© 2010 –
<!-- -->2022
<!-- -->
Yada Yada Pty. Ltd.
</p>
</nav>
</footer>
*,
*:before,
*:after {
box-sizing: border-box;
}
/* back to top button styles */
.top-link {
position: fixed;
right: 15px;
bottom: 15px;
background-color: rgb(216, 204, 204);
padding: 0;
margin: 0;
border-radius: 50%;
box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
transition: transform 0.3s ease-in-out;
}
.top-link svg {
height: 2.25rem;
width: auto;
}
a[aria-hidden="true"] {
transform: scale(0);
}
/* other styles */
body {
font-family: "Open Sans", sans-serif;
margin: 0;
overflow-x: hidden;
}
body > header {
display: flex;
align-items: center;
min-height: 4em;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
font-weight: 700;
font-size: 1.25rem;
padding: 0;
background-color: white;
}
.home {
padding: 0 2rem 0 0.5rem;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline-block;
padding-right: 1rem;
}
nav a {
text-decoration: none;
color: inherit;
}
main {
display: grid;
max-width: 800px;
margin: 20px auto;
}
.details {
display: grid;
grid-template-columns: auto max-content 1fr;
align-items: center;
grid-gap: 10px;
margin-bottom: 30px;
width: 100%;
}
h1 {
font-family: Raleway, serif;
font-size: 2.25em;
line-height: 1.25em;
grid-column: 1 / -1;
}
.author-img {
width: 45px;
height: 45px;
border-radius: 50%;
}
article img {
display: block;
width: 100%;
}
a,
a:visited {
text-decoration: none;
}
footer {
background-color: black;
color: white;
margin: 0;
font-size: 1.1rem;
}
footer nav {
margin: 0 auto;
max-width: 1248px;
width: 100%;
}
.footer-links {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-content: space-evenly;
padding: 16px;
width: 100%;
}
@media screen and (max-width: 700px) {
.footer-links {
grid-template-columns: auto;
}
}
.footer-links ul {
display: flex;
flex-direction: column;
}
.social {
align-self: flex-start;
}
.social-icon {
width: 1.5em;
margin-right: 0.5rem;
}
.copyright {
text-align: center;
padding: 5px;
margin: 0;
}
let backToTopLink = document.querySelector(".top-link");
let previousScrollPosition = 0;
const isScrollingDown = () => {
let goingDown = false;
let scrollPosition = window.pageYOffset;
if (scrollPosition > previousScrollPosition) {
goingDown = true;
}
previousScrollPosition = scrollPosition;
return goingDown;
};
const handleScroll = () => {
let viewportHeight = window.innerHeight;
let scrollPosition = window.pageYOffset;
if (isScrollingDown()) {
backToTopLink.setAttribute("aria-hidden", "true");
} else if (isScrollingDown() === false && scrollPosition > viewportHeight) {
backToTopLink.setAttribute("aria-hidden", "false");
}
};
// the throttle is provided by the lodash library
const scrollThrottle = _.throttle(handleScroll, 100);
window.addEventListener("scroll", scrollThrottle);
Also see: Tab Triggers