{"id":95788,"date":"2024-02-21T08:53:25","date_gmt":"2024-02-21T08:53:25","guid":{"rendered":"https:\/\/blog.superbthemes.com\/?p=95788"},"modified":"2024-04-16T17:30:53","modified_gmt":"2024-04-16T17:30:53","slug":"how-to-make-a-back-to-top-button-in-framer","status":"publish","type":"post","link":"https:\/\/blog.superbthemes.com\/website\/how-to-make-a-back-to-top-button-in-framer\/","title":{"rendered":"How To Make A Back-To-Top Button In Framer"},"content":{"rendered":"\n

In this Framer<\/a> tutorial, you\u2019ll learn how to make a \u201cback to top\u201d button without the need for any code!<\/p>\n\n\n\n

This short guide is entirely beginner-friendly. But to make things even easier, I\u2019ve prepared a free working project<\/a> you can remix for reference.<\/p>\n\n\n\n

STEP 1: CREATE THE BUTTON<\/h2>\n\n\n\n

Begin by designing a simple button component with a link variable.<\/p>\n\n\n\n

Usually, this button is placed somewhere in the bottom-right of the page – although you can put it anywhere you like.<\/p>\n\n\n\n

To ensure it\u2019s always in the top-right corner, set its positioning to \u201cfixed\u201d and set both right and bottom constraints to 25px.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 2: ADD A SCROLL SECTION<\/h2>\n\n\n\n

Now that we have the button in place, it\u2019s time to create a target for it. To do that, assign a scroll section to the hero section of your page.<\/p>\n\n\n\n

Select the hero section, click on \u201cScroll Section\u201d in the right sidebar, provide a name (e.g., \u201ctop\u201d), and leave the \u201cOffset Y\u201d at 0.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

STEP 3: LINK THE BUTTON<\/h2>\n\n\n\n

The final step involves linking the button.<\/p>\n\n\n\n

Select the button, set the link to the same page, and choose the recently created section as the target. It\u2019s that easy!<\/p>\n\n\n\n

\"\"\/<\/figure>\n\n\n\n

BONUS STEP<\/h2>\n\n\n\n

Here\u2019s a bonus step if you only want the button to appear when the user has scrolled past a certain height.<\/p>\n\n\n\n

To do that, add a scroll section to the second section of the page. Then, add an \u201cappear\u201d animation to the button, which gets triggered when the section you\u2019ve just created is in view.<\/p>\n\n\n\n

Make sure the \u201creplay\u201d property is set to \u201cyes\u201d so the button disappears when the user scrolls back to the top.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

CONCLUSION<\/h2>\n\n\n\n

And voil\u00e0! You\u2019ve just successfully created a scroll-to-top button in Framer.
Don\u2019t forget to grab the free project<\/a> for a hands-on reference.
Happy designing!<\/p>\n\n\n\n

WRITTEN BY<\/h2>\n\n\n\n

Luca Da Corte<\/a> is a freelance Framer Expert and SEO specialist. When he\u2019s not working on some exciting projects, he curates a blog where he shares insights, resources, and experiences on everything regarding websites.<\/p>\n","protected":false},"excerpt":{"rendered":"

In this Framer tutorial, you\u2019ll learn how to make a \u201cback to top\u201d button without the need for any code! This short guide is entirely beginner-friendly. But to make things even easier,…<\/p>\n","protected":false},"author":7,"featured_media":95789,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[256,8],"tags":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95788"}],"collection":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/comments?post=95788"}],"version-history":[{"count":3,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95788\/revisions"}],"predecessor-version":[{"id":95811,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/posts\/95788\/revisions\/95811"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/media\/95789"}],"wp:attachment":[{"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/media?parent=95788"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/categories?post=95788"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.superbthemes.com\/wp-json\/wp\/v2\/tags?post=95788"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}