https://github.com/iamriajul/qwik-scroll-to-top
Lightweight button component for scrolling to the top of a page.
https://github.com/iamriajul/qwik-scroll-to-top
qwik scroll scroll-to-top scroll-up
Last synced: over 1 year ago
JSON representation
Lightweight button component for scrolling to the top of a page.
- Host: GitHub
- URL: https://github.com/iamriajul/qwik-scroll-to-top
- Owner: iamriajul
- Created: 2023-10-07T14:00:34.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-11-29T12:04:54.000Z (over 2 years ago)
- Last Synced: 2025-02-24T12:07:08.033Z (over 1 year ago)
- Topics: qwik, scroll, scroll-to-top, scroll-up
- Language: TypeScript
- Homepage:
- Size: 70.3 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
[](https://nodei.co/npm/react-scroll-to-top/)
## Live demo
[A live demo can be found here](https://codesandbox.io/s/react-scroll-to-top-demo-rmuvx?file=/src/App.js)
## Installation
With pnpm:
```sh
pnpm i qwik-scroll-to-top
```
With npm:
```sh
npm i qwik-scroll-to-top
```
or with Yarn:
```sh
yarn add qwik-scroll-to-top
```
## Usage
Import and then add `` at the bottom of your return function (for a11y reasons):
```js
import { ScrollToTop } from "qwik-scroll-to-top";
function CoolPage() {
return (
Hello, world!
);
}
```
## 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) | |
Smooth scrolling uses a newer `window.scrollTo` implementation.\
[Check out its support in browsers at MDN web docs](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo).
## Examples
[With custom SVG path](https://codesandbox.io/s/react-scroll-to-top-svg-path-y2ztc?file=/src/App.js)
[With custom SVG component](https://codesandbox.io/s/react-scroll-to-top-custom-svg-or74g?file=/src/App.js)
[With custom DOM element](https://codesandbox.io/s/react-scroll-to-top-custom-dom-element-y7j0f?file=/src/App.js)
## Types
Written in TypeScript, no need for @types installation
Ported from: [react-scroll-to-top](https://github.com/HermanNygaard/react-scroll-to-top)