Install

npm install @uiw/react-back-to-top --save

Usage

importReactfrom"react";importBackToUpfrom'@uiw/react-back-to-top';exportdefaultfunctionApp(){return(<divclassName="container"><spanstyle={{color:'red'}}>        Please check the button in the lower right corner of your web page.</span><BackToUp>Top</BackToUp></div>);}

importReact,{useRef,useEffect,useState}from"react";importBackToUpfrom'@uiw/react-back-to-top';importstyledfrom'styled-components';constWarpper=styled.div`  overflow: auto;  white-space: normal;  width: 300px;  height: 300px;  &::-webkit-scrollbar {    -webkit-appearance: none;    width: 7px;    background: #00000038;  }  &::-webkit-scrollbar-thumb {    border-radius: 4px;    background-color: #595959;  }  p {    display: inline;    background: rgba(0, 0, 0, 0.12);    color: transparent;  }`;exportdefaultfunctionApp(){const$dom=useRef(null);const[element,setElement]=useState();useEffect(()=>setElement($dom.current),[])return(<Warpperref={$dom}><h1>React simple scroll up with onScroll progress</h1><p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.</p><h2>Scroll down ↓</h2><p>Declarative views make your code more predictable and easier to debug.</p><h2style={{height:1200}}>Scroll down ↓</h2><p>Build encapsulated components that manage their own state, then compose them to make complex UIs.</p><p>Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.</p><BackToUptop={0}element={$dom.current}style={{float:'right'}}>Top</BackToUp></Warpper>);}

importReact,{useRef,useEffect,useState}from"react";importBackToUpfrom'@uiw/react-back-to-top';importstyledfrom'styled-components';constWarpper=styled.div`  overflow: auto;  white-space: normal;  width: 300px;  height: 300px;  &::-webkit-scrollbar {    -webkit-appearance: none;    width: 7px;    background: #00000038;  }  &::-webkit-scrollbar-thumb {    border-radius: 4px;    background-color: #595959;  }  p {    display: inline;    background: rgba(0, 0, 0, 0.12);    color: transparent;  }`;exportdefaultfunctionApp(){const$dom=useRef(null);const[element,setElement]=useState();useEffect(()=>setElement($dom.current),[])return(<Warpperref={$dom}><h1>React simple scroll up with onScroll progress</h1><p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.</p><h2>Scroll down ↓</h2><p>Declarative views make your code more predictable and easier to debug.</p><h2>Scroll down ↓</h2><p>Build encapsulated components that manage their own state, then compose them to make complex UIs.</p><p>Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.</p><BackToUptop={0}hideProgresselement={$dom.current}style={{float:'right'}}><divstyle={{border:'1px solid red',color:'red',background:'#ffeb3b'}}>          Top</div></BackToUp></Warpper>);}

Props

importReactfrom'react';exportinterfaceBackToUpPropsextendsReact.AllHTMLAttributes<HTMLDivElement>{prefixCls?:string;/** Scroll bar area @default document.documentElement **/element?:HTMLElement;/** Whether to use smooth scrolling* @default true */smooth?:boolean;/** Classname to add/override styling (note, !important for overrides might be needed) */className?:string;/** Object to add/override styling */style?:React.CSSProperties;/** Height after page scroll to be visible @default 120 **/top?:number;/** The Button width & height @default 35 */size?:number;/** the width of the progress bar */strokeWidth?:number;/** hide progress icon */hideProgress?:boolean;}exportdefaultfunctionBackToUp(props?:BackToUpProps):JSX.Element;

Development

npm install

npm run build# Compile packages      📦 @uiw/react-back-to-topnpm run watch# Real-time compilation 📦 @uiw/react-back-to-top

npm run start

npm run test

Contributors

License