vue-3-scroll-to-top-button v1.0.2
vue-3-scroll-to-top-button
A Vue.js component for a floating action button (FAB) that scrolls the page to the top.
Installation
Install the package using npm or yarn:
npm install vue-3-scroll-to-top-button
# or
yarn add vue-3-scroll-to-top-buttonDefault example
By default, the button will be on the bottom left, you can play with the options to customize it or positionnate it.
<script setup lang="ts">
import { ScrollToTopButton } from 'vue-3-scroll-to-top-button';
import 'vue-3-scroll-to-top-button/style.css';
</script>
<template>
<ScrollToTopButtonVue />
</template>Example with relative position
You can for example pass props to positionnate relatively the button
<script setup lang="ts">
import { ScrollToTopButton } from 'vue-3-scroll-to-top-button';
import 'vue-3-scroll-to-top-button/style.css';
</script>
<template>
<ScrollToTopButtonVue
noTeleport
:showButtonTreshold="0"
:style="{ position: 'relative' }"
/>
</template>Example with Custom Icon
Or you can take advantage of the slot to pass a custom icon, or play with the detection treshold
<script setup lang="ts">
import { ScrollToTopButton } from 'vue-3-scroll-to-top-button';
import 'vue-3-scroll-to-top-button/style.css';
</script>
<template>
<div>
<ScrollToTopButtonVue
:showButtonTreshold="300"
position="top"
class="custom-button"
backgroundColor="yellow"
iconColor="blue"
>
<template #icon>
<svg viewBox="0 0 24 24" width="48px" height="48px" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
<path d="M12 2L3 12h4v8h10v-8h4z" />
</svg>
</template>
</ScrollToTopButtonVue>
</div>
</template>
<style>
.custom-button {
height: 100px;
}
</style>Props
| Name | Type | Description |
|---|---|---|
| anchor | (string) | The target element to which the button will be teleported. Defaults to 'body'. |
| iconColor | (string) | The color of the button icon. Defaults to 'white'. |
| backgroundColor | (string) | The background color of the button. Defaults to '#2C3436'. |
| showButtonTreshold | (number) | The scroll threshold at which the button becomes visible. Defaults to 1. |
| withAnimation | (boolean) | Enables or disables the transition animation. Defaults to true. |
| size | (ButtonSize) | The size of the button. Can be 'small', 'medium', or 'large'. Defaults to 'medium'. |
| position | (ButtonPosition) | The position of the button. Can be 'top-left', 'top', 'top-right', 'right', 'bottom-right', 'bottom', 'bottom-left', or 'left'. Defaults to 'bottom-right'. |
| noTeleport | (boolean) | Disables teleporting the button to a specified anchor. Defaults to false. |
| marginFromSide | (string) | The margin from the side when using noTeleport. Defaults to '12px'. |
Types
The component is fully written in typescript so you have the best autocompletion Here are the types of the props so you can manipulate it.
export type ButtonSize = 'small' | 'medium' | 'large'
export type ButtonPosition = 'top-left'
| 'top'
| 'top-right'
| 'right'
| 'bottom-right'
| 'bottom'
| 'bottom-left'
| 'left'
export interface ScrollToTopButtonProps {
anchor?: string
iconColor?: string
backgroundColor?: string
showButtonTreshold?: number
withAnimation?: boolean
size?: ButtonSize
position?: ButtonPosition
noTeleport?: boolean
marginFromSide?: string
}Accessibility
The component is designed to be accessible with proper ARIA attributes and roles. The button is given an aria-label of "Scroll to Top" and a role of "button" to enhance accessibility.
Transitions
The button features a smooth transition effect when appearing or disappearing, enhancing the user experience.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
Thanks to Anatole Acqueberge for creating this amazing Vue 3 confettis plugin! Feel free to contribute, report issues, or suggest improvements. Happy coding! 🎉