vue-3-scroll-to-top-button

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-button

Default 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'.

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! 🎉