Scroll Back to Top for Framer

Introduction

Small navigation features make a big difference in user experience. With this Scroll Back to Top code override for Framer, you can add a smooth, one-click scroll function to any button in your project. It’s perfect for long pages, making it easy for users to get back to the top without the hassle of manual scrolling.

Why Add a Scroll Back to Top Button?

Adding this type of functionality improves navigation, especially on content-heavy or long-scroll pages. This feature allows users to quickly return to the top, creating a smoother experience and helping to keep them engaged on your site. It’s a small addition that can make a big difference in usability.

How to Use the Code Override

The code override is super easy to apply and only requires a few steps to get it working on your button.

1. Grab the remix link at the bottom

2. In the assets panel locate the ScrollToTop.tsx

3. ⌘ + A to select all and ⌘ + C to copy all

4. In your own project create a new code override from the assets panel where you will paste the previously copied code

5. Now select a button which you would like to use and enable its code overrides

6. In the code overrides panel you will set the File to whatever you called your code override and the Override to backTop

7. Done, you're all set