Customizable plugin, smooth scroll up button, on native JavaScript

Related tags

React up-button
Overview

up-button

Customizable plugin, smooth scroll up button, on native JavaScript

Description

Up button initialization, call up() function, in your js file, or in html file, inside script tag The button has standard styles that are specified in the css file, but it can be customized for a specific design by passing parameters to the function.

Initialization

 up();

Initialization with parameters

up({
   bottom: '20px',
   right: '20px',
   width: '45px',
   height: '45px',
   bg: 'green',
   src: 'img/chevron-up-solid.svg',
   whenShow: 400,
   circle: true
  })

Settings

top

Top position, written in quotes, example "20px"


bottom

Bottom position, written in quotes, example "5%"


left

Position to the left, written in quotes, example "2vw"


right

Right position, written in quotes, example "25px"


width

Button width, written in quotes, example "45px"


height

Button height, written in quotes, example "45px"


bg

background color of the button, written in quotes, example "# 000"


src

The address (URL) of the picture in the button, written in quotes, for example "img / picture.svg"


whenShow

How long does it take to scroll the page for the button to appear, example 400


circle

If the button should be round, example is true

You might also like...

A collection of sample apps built using GetStream and React Native

React Native samples [ Built with ♥ at Stream ] This repo contains projects and samples developed by the team and Stream community, using React Native

Jan 8, 2023

Boilerplate to build Cross-Platform Apps with Expo and React Native

Expo and React Native Boilerplate Boilerplate to build Cross-Platform Apps with Expo and React Native What are you going to find in this boilerplate E

Apr 29, 2022

Fully typed hooks and utility functions for the React Native StyleSheet API

react-native-style-utilities Fully typed hooks and utility functions for the React Native StyleSheet API npm i react-native-style-utilities ESLint Set

Dec 17, 2022

React Native popup tip utility

React Native popup tip utility

react-native-tip React Native Tip is a simple package inspired in MaterialUI-Tooltip that helps you to show a quick tip to the user and highlight some

Jan 5, 2023

A social app concept with React Native

A social app concept with React Native

Social App Concept-React Native 🔥 A simple social app concept with react native. Improving day by day. Star ⭐ the repo if you like what you see 😉 .

Dec 31, 2022

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

Further split the React Native code based on Metro build to improve performance, providing `Dll` and `Dynamic Imports` features

React-Native Code Splitting Further split the React Native code based on Metro build to improve performance, providing Dll and Dynamic Imports feature

Dec 29, 2022

React Native & Expo music player application UI

React Native & Expo music player application UI

Would you like to support me? Musicont React Native & Expo music player application UI Demo: https://expo.io/@jsxclan/musicont APK: Download on Google

Dec 14, 2022

uber-eats-clone react native

uber-eats-clone react native

Uber Eats Clone Uber Eats Clone React Native Tools and technology react-native Stripe payment checkout expo tailwind css yelp API Firebase (Authentica

Dec 7, 2022

A React Native starter template project with built-in navigation & redux toolkit.

react-native-template A React Native starter template project with built-in navigation & redux toolkit. What's included? @react-native-async-storage/a

Oct 29, 2022
Owner
Alexandr Zabolotny
Front-end developer, specializing in layout and JavaScript
Alexandr Zabolotny
null 136 Dec 30, 2022
Reusable way to create smooth tab highlights.

useTabs Reusable way to create smooth tab highlights. Installation Install my-project with npm npm install @olivieralexander/usetabs Usage/Examples

OlivierAlexander 7 Jul 31, 2022
A styleable sharing button that uses the Web Share API.

msme-sharing-button A styleable sharing button that uses the Web Share API. Installation npm i msme-sharing-button --save and load the file in your HT

Martin Schneider 2 Aug 15, 2022
Phonemask - Library for processing the phone input field in the web form. Only native javascript is used

phonemask Library for processing the phone input field in the web form. Only native javascript is used Usage: Adding a library to HTML <script type="a

Neovav 2 Sep 20, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 83.6k Dec 30, 2022
Next-gen, highly customizable content editor for the browser - based on React and Redux and written in TypeScript. WYSIWYG on steroids.

ReactPage ReactPage is a smart, extensible and modern editor ("WYSIWYG") for the web written in React. If you are fed up with the limitations of conte

null 9.1k Jan 6, 2023
Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS.

React Table + Tailwind CSS = ❤️ Source code for my tutorial on how to build customizable table component with React Table and Tailwind CSS. Both parts

Samuel Liedtke 147 Jan 7, 2023
Simple and customizable React UI components.

poem-ui Simple and customizable React UI components. Some components use third-party plug-ins to improve the interaction. You can remove third-party p

UIUX Lab 2 Jan 5, 2022
📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

React Hook Form 32.4k Dec 29, 2022
Free React Native library to display local notifications.

React-Native NotiFREE ⚛ React Native library to display local notifications. A FREE alternative to React Native NotiFEE. Why? Nobody can remove the gr

Douglas Nassif Roma Junior 23 Nov 10, 2022