# BackToTop

> Legacy floating back-to-top button for long pages

Canonical URL: https://fa7e86e3d553:3005/islands/navigation/back-to-top

> **Deprecated.** Use a native anchor link with CSS `scroll-behavior` for new
> pages. This island remains only for existing pages that already use it.

## Preview

**Category**: Navigation

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| threshold | number | no | 600 | Scroll distance (px) before button appears |
| smooth | boolean | no | true | Smooth scroll animation |
| label | string | no | - | Optional text label (defaults to arrow icon only) |

## Embed Example

```html
<lx-island name="BackToTop">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Recommended replacement

```html
<a href="#page-top">Back to top</a>
```

Add `scroll-behavior: smooth` to the page or section CSS when appropriate.

## Legacy usage pattern

For a legacy page, keep at most one instance:

```html
<lx-island name="BackToTop">
  <script type="application/json">
{}
  </script>
</lx-island>
```

**With text label:**

```html
<lx-island name="BackToTop">
  <script type="application/json">
{}
  </script>
</lx-island>
```

## Tips

- Place once per page in hidden section (auto-positions fixed bottom-right)
- threshold in pixels (600 = button appears after scrolling 600px down)
- smooth:true uses CSS smooth scroll (disable for instant jump)
- label prop adds text next to icon (optional, defaults to icon-only)
- Button fades in/out based on scroll position
- Most useful on long pages (PDPs with many sections, landing pages, blog posts)

## Stylable Parts

Target internal elements via `data-part` selectors in section CSS:

| Part | Description |
|------|-------------|
| `button` | Submit/action button |
| `icon` | Icon element |

```css
/* Example: custom styling */
[data-section-id='SECTION'] [data-part='root'] {
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
```

## Related Islands

- [Navbar](/islands/navigation/navbar) — Sticky navbar reduces need for back-to-top, but they work well together
- [SocialProofPopup](/islands/social-proof/social-proof-popup) — Both are fixed-position elements, ensure no visual clash