Qwik-scroll-to-top NPM

qwik-scroll-to-top

A lightweight and customizable button component that scrolls to the top of a page when pressed
The button is only visible once a certain height has been reached on the page

Live demo

A live demo can be found here

Installation

With pnpm:

pnpm i qwik-scroll-to-top

With npm:

npm i qwik-scroll-to-top

or with Yarn:

 yarn add qwik-scroll-to-top

Usage

Import and then add <ScrollToTop /> at the bottom of your return function (for a11y reasons):

import { ScrollToTop } from "qwik-scroll-to-top";

function CoolPage() {
  return (
    <div>
      <h1>Hello, world!</h1>
      <div style={{ marginTop: "150vh" }} />
      <ScrollToTop smooth />
    </div>
  );
}

Props

Prop	Type	Description	Default
useSlot	boolean	Whether you want use your passed Slot(children) as Icon of the button	false
smooth	boolean	Whether to use smooth scrolling*	false
top	number	Height after page scroll to be visible	20
color	string	The SVG icon fill color	"black"
svgPath	string	The SVG icon path d attribute	An arrow path
width	string	The SVG icon width	"28"
height	string	The SVG icon height	"28"
viewBox	string	The SVG icon viewBox attribute	"0 0 256 256"
component	any	Component to override SVG icon. See examples
style	Object	Object to add/override styling
class	string	Class to add/override styling (note, `!important` for overrides might be needed)