Back-to-top button

Wrap around the main part of your page to add a back-to-top button.

Live example

Scroll down on this page to see the back-to-top button in action.

How to use

Install the package or use the CDN, then add the files to the head of your HTML file.

Wrap the main content portion of your page in the <nidhugg-back-to-top> tag.

By default, the browser will scroll up to the start of the <nidhugg-back-to-top> tag when clicked.

If you wish to use a different ID to link to, you can add the scroll-to attribute to the <nidhugg-back-to-top> tag like this: <nidhugg-back-to-top scroll-to="someId">

Example


<html lang="en">
<head>
	<title>My page</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/backToTop/nidhuggBackToTop.css" />
	<script src="https://cdn.jsdelivr.net/gh/fredrikbergqvist/nidhu.gg/dist/backToTop/nidhuggBackToTop.js" defer></script>
</head>
<body>
<nidhugg-back-to-top>
	<div style="height:400vh">
		<p>Lots of great content...</p>
	</div>
</nidhugg-back-to-top>
</body>
</html>

Installation

The package can be found here: https://jsr.io/@nidhugg/web-components, and the code is hosted here: https://github.com/fredrikbergqvist/nidhu.gg

npm:

npx jsr add @nidhugg/web-components

Yarn:

yarn dlx jsr add @nidhugg/web-components

CDN:

Styling

There is not a lot to style, but if you want to tweak the default colors, you can do so by overriding the following CSS variables:

:root {
	--nidhugg-base-content: #fefefe; /*Used for the background and text color*/
	--nidhugg-base-500: #0f1216; /*Fill color in the SVG up arrow*/
}

If you prefer to style the button itself, you can do so by targeting the nidhugg-back-to-top tag, or these CSS classes.

#nidhugg-back-to-top,
.nidhugg-back-to-top_anchor {
	/*These target the same element*/

	&.nidhugg-scroll-animation {
		/*
		  This class is added if the browser supports CSS Scroll animation
		  https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
		*/
	}
}