Variable StyledScrollToTopFab`Const`

StyledScrollToTopFab: StyledComponent<
    FabOwnProps & Omit<ButtonBaseOwnProps, "classes"> & CommonProps & Omit<
        DetailedHTMLProps<
            ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement,
        >,

            | "className"
            | "style"
            | "classes"
            | "action"
            | "centerRipple"
            | "children"
            | "disabled"
            | "disableRipple"
            | "disableTouchRipple"
            | "focusRipple"
            | "focusVisibleClassName"
            | "LinkComponent"
            | "onFocusVisible"
            | "sx"
            | "tabIndex"
            | "TouchRippleProps"
            | "touchRippleRef"
            | "href"
            | "color"
            | "disableFocusRipple"
            | "size"
            | "variant",
    > & MUIStyledCommonProps<Theme> & {},
    {},
    {},
> = ...

Styled scroll-to-top floating action button

Component

StyledScrollToTopFab

Description

A customized FAB (Floating Action Button) for scrolling to the top of the page. Features include:

Fixed positioning at bottom-right
Smooth hover and focus animations
Responsive sizing
Theme-aware styling

Param: props

Material-UI Fab props

Param: props.theme

Material-UI theme object

Example

<StyledScrollToTopFab
  onClick={scrollToTop}
  aria-label="scroll back to top"
>
  <StykedKeyboardArrowUp />
</StyledScrollToTopFab>