Scroll to Top Button

May 13, 2024

Scroll to Top button
Scroll to Top button

The Framer Scroll to Top component allows you to add a button to your website that, when clicked, will smoothly scroll the page back to the top.

To use this component:

  1. Drag and drop the "Scroll to Top" component from the component list onto your canvas.

    Set Up the Component
  2. Configure the following properties:

    • Button: Select the component on your canvas that you want to use as the "Scroll to Top" button.

      Select the Button Component

      This component should be outside the Desktop, Tablet, and Phone breakpoints.

      Component outside of Breakpoints


    • Top: Enter the number of pixels from the top of the page that you want the scroll to stop at. For example, if you want the page to scroll all the way to the very top, you can enter "0".

    • Behavior: Choose whether you want the scrolling to happen instantly or with a smooth animation.

That's it! Once you've set up the component and configured the properties, you will be able to click and the page will smoothly scroll back to the top.