Archive
BackTop

BackTop

Example

Steps

Install Package

npm install @heroicons/react

Copy Code

containers/BackTop/index.tsx
import { memo } from 'react'
import type { FC } from 'react'
import { ArrowUpIcon } from '@heroicons/react/24/outline'
 
export interface Props {}
interface State {}
 
const BackTop: FC<Props> = () => {
  return (
    <button
      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
      className="fixed right-5 bottom-5 z-10 rounded-full bg-neutral-200 p-2 active:bg-neutral-100 dark:bg-neutral-600 dark:hover:bg-neutral-500 dark:active:bg-neutral-700"
    >
      <ArrowUpIcon className="h-5 w-5" />
    </button>
  )
}
 
export default memo(BackTop)

Usage

<BackTop />

© 2023 kidow. All rights reserved.
안녕하세요?