53:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/415hvdruki4ud.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1ktf0sm5sxqup.js","/creators-assets/_next/static/immutable/chunks/1dzfckym0nghc.js","/creators-assets/_next/static/immutable/chunks/1vr_3-vdcf0mn.js","/creators-assets/_next/static/immutable/chunks/1cuuzi60s_xh3.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1gop2naj8q_bx.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/2k_aekaeyljm2.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0mxxs4-__ynew.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/43klns5g0wl80.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0xit-z5qwqul7.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/32cfyvu36_37j.js","/creators-assets/_next/static/immutable/chunks/1kws7r6etoq5-.js","/creators-assets/_next/static/immutable/chunks/3um5ae_udgvki.js","/creators-assets/_next/static/immutable/chunks/2p4sqhvmasp9s.js","/creators-assets/_next/static/immutable/chunks/2zlizmh1083ez.js","/creators-assets/_next/static/immutable/chunks/13mks9ztnefhj.js","/creators-assets/_next/static/immutable/chunks/1czq4md204jhl.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3ym52__dqzver.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3lqyfto2688hr.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1yafild1hsc0a.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 54:Ta35,

A polished, flexible Back to Top button for Framer.

Add → Customize → Publish.

✨ More than a Back to Top button

Back to Top combines smooth scrolling, scroll progress, flexible layouts, multiple shapes, entrance animations, and detailed styling controls in one lightweight component.

What you get

↟ Smart scrolling

Customizable scroll threshold
Smooth or instant scrolling
Page or custom scroll container support

◌ Scroll progress

Live page scroll progress
Progress follows the button shape
Clockwise / counter-clockwise direction
Adjustable color, width, gap & opacity

▣ Flexible layouts

Icon
Text + Icon
Icon + Text
Text

Text layouts automatically size to their content.

◆ 9 shapes Circle, Square, Rounded, Rectangle, Pill, Diamond, Hexagon, Octagon & Custom.

🎨 Fully customizable Control size, icon, typography, spacing, colors, border, shadow, position and offsets directly from Framer.

✨ Smooth interactions Fade, Fade + Scale, Slide Up, Slide Side or None — plus hover scale, rotation, press animation and animation speed.

♿ Accessibility Keyboard support, accessible labels, proper button semantics and reduced-motion support.

🚀 Perfect for

SaaS • Landing Pages • Agencies • Portfolios • Blogs • Documentation • E-commerce • Product Pages • Marketing Websites

Especially useful for long pages where visitors don't want to manually scroll back to the top.

⚡ Stop rebuilding it

Why spend time creating scroll detection, progress calculations, animations, responsive behavior and accessibility for every project?

Add it once. Customize it visually. Reuse it everywhere.

💎 Built for Framer

No code editing. No external setup. No subscription.

One-time purchase.

Launch price: $3

Free for a limited launch period — grab it now.

A small component that can save you from rebuilding the same functionality again and again.

52:["$","$L53",null,{"value":{"fallback":{"$inf$activity-creator-c1e20d0f-4ef0-4bef-bd07-2a8456906cb8-all:/unified/creator/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/activity/":[{"data":[{"id":"01a0f339-5646-728d-ba66-a64e208ea5a4","type":"creator.followed","target":{"type":"creator","id":"23702b39-dda6-4ff7-94d2-9633272a8c88","preview":"Noel Dario Andres","previewJson":null,"thumbnail":"https://framerusercontent.com/avatars/users/23702b39-dda6-4ff7-94d2-9633272a8c88/7xEQkh8a1","slug":"noel-dario-andres-z2ebfu","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","slug":"muthu-somasundaram","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T16:50:16.227Z","latestAt":"2026-09-30T16:50:16.227Z"},{"id":"01a0f215-ec42-7058-8226-439d3f6d2553","type":"creator.followed","target":{"type":"creator","id":"09bc3e24-752b-4a1b-97c2-ab8d755f63b8","preview":"Tauhid Hasan","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/09bc3e24-752b-4a1b-97c2-ab8d755f63b8/4taurhlo","slug":"tauhiduiux","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","slug":"muthu-somasundaram","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T11:31:58.119Z","latestAt":"2026-09-30T11:31:58.119Z"},{"id":"01a0efda-a9ac-70ed-b898-fbfa06cc51da","type":"creator.followed","target":{"type":"creator","id":"d7b633f0-85d0-4e75-b61f-08c45984e34b","preview":"PixlForm®","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/d7b633f0-85d0-4e75-b61f-08c45984e34b/pdzpgzrh","slug":"pixl-form","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","slug":"muthu-somasundaram","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-09-30T01:07:59.995Z","latestAt":"2026-09-30T01:07:59.995Z"},{"id":"01a0ec3a-9c83-7449-bbf5-447063c6a50b","type":"component.created","target":{"type":"component","id":"GDb1BwRm2gBX2GrsciRo","preview":"Back to Top flexible","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/01a0ec60-845c-7764-b91d-b16487bf3176.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","slug":"muthu-somasundaram","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-09-29T08:14:19.267Z","latestAt":"2026-09-29T08:14:19.267Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:c1e20d0f-4ef0-4bef-bd07-2a8456906cb8:/unified/posts/?creator=c1e20d0f-4ef0-4bef-bd07-2a8456906cb8&with=reposts":[{"data":[{"id":"01a0ec3a-9a10-77a9-97c6-c3c8e79d6ad3","title":null,"body":"

🚀 Just launched: Back to Top — Scroll Progress Button

I built a flexible Back to Top component for Framer that does more than just scroll to the top.

✨ Smooth or instant scrolling ◌ Live scroll progress ring ▣ Icon, text, or text + icon layouts ◆ 9 different shape styles 🎨 Detailed styling controls ⚡ Entrance & hover animations ♿ Keyboard + reduced-motion support

Everything is customizable directly from Framer — no code editing or external setup.

I’m making it FREE for the initial launch period 🎁

If you build long-form pages, SaaS sites, landing pages, blogs, documentation or e-commerce sites, I’d love for you to try it and share your feedback.

Would especially love to hear which feature you'd like to see added next!

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Just launched: Back to Top — Scroll Progress Button"}]},{"type":"paragraph","content":[{"type":"text","text":"I built a flexible Back to Top component for Framer that does more than just scroll to the top."}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Smooth or instant scrolling ◌ Live scroll progress ring ▣ Icon, text, or text + icon layouts ◆ 9 different shape styles "},{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Detailed styling controls ⚡ Entrance & hover animations ♿ Keyboard + reduced-motion support"}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is customizable directly from Framer — no code editing or external setup."}]},{"type":"paragraph","content":[{"type":"text","text":"I’m making it "},{"type":"text","text":"FREE for the initial launch period","marks":[{"type":"bold"}]},{"type":"text","text":" "},{"type":"emoji","attrs":{"name":"gift","emoji":"🎁"}}]},{"type":"paragraph","content":[{"type":"text","text":"If you build long-form pages, SaaS sites, landing pages, blogs, documentation or e-commerce sites, I’d love for you to try it and share your feedback."}]},{"type":"paragraph","content":[{"type":"text","text":"Would especially love to hear which feature you'd like to see added next!"}]}]},"author":{"framerUserId":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","slug":"muthu-somasundaram","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","followed":false,"followsYou":false},"media":[],"resources":[{"id":"GDb1BwRm2gBX2GrsciRo","resolved":true,"title":"Back to Top flexible","body":"$54","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Back to Top — Scroll Progress Button"}]},{"type":"customHeading","content":[{"type":"text","text":"A polished, flexible Back to Top button for Framer."}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Add → Customize → Publish.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"text","text":"✨ More than a Back to Top button"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Back to Top combines smooth scrolling, scroll progress, flexible layouts, multiple shapes, entrance animations, and detailed styling controls in one lightweight component."}]},{"type":"customHeading","content":[{"type":"text","text":"What you get"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"↟ Smart scrolling","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable scroll threshold"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth or instant scrolling"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Page or custom scroll container support"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"◌ Scroll progress","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Live page scroll progress"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Progress follows the button shape"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clockwise / counter-clockwise direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable color, width, gap & opacity"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"▣ Flexible layouts","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text + Icon"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon + Text"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Text layouts automatically size to their content."}]},{"type":"paragraph","content":[{"type":"text","text":"◆ 9 shapes","marks":[{"type":"bold"}]},{"type":"text","text":" Circle, Square, Rounded, Rectangle, Pill, Diamond, Hexagon, Octagon & Custom."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" Fully customizable","marks":[{"type":"bold"}]},{"type":"text","text":" Control size, icon, typography, spacing, colors, border, shadow, position and offsets directly from Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"✨ Smooth interactions","marks":[{"type":"bold"}]},{"type":"text","text":" Fade, Fade + Scale, Slide Up, Slide Side or None — plus hover scale, rotation, press animation and animation speed."}]},{"type":"paragraph","content":[{"type":"text","text":"♿ Accessibility","marks":[{"type":"bold"}]},{"type":"text","text":" Keyboard support, accessible labels, proper button semantics and reduced-motion support."}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" Perfect for"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"SaaS • Landing Pages • Agencies • Portfolios • Blogs • Documentation • E-commerce • Product Pages • Marketing Websites"}]},{"type":"paragraph","content":[{"type":"text","text":"Especially useful for long pages where visitors don't want to manually scroll back to the top."}]},{"type":"customHeading","content":[{"type":"text","text":"⚡ Stop rebuilding it"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Why spend time creating scroll detection, progress calculations, animations, responsive behavior and accessibility for every project?"}]},{"type":"paragraph","content":[{"type":"text","text":"Add it once. Customize it visually. Reuse it everywhere.","marks":[{"type":"bold"}]}]},{"type":"customHeading","content":[{"type":"emoji","attrs":{"name":"gem","emoji":"💎"}},{"type":"text","text":" Built for Framer"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"No code editing. No external setup. No subscription."}]},{"type":"paragraph","content":[{"type":"text","text":"One-time purchase.","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Launch price: "},{"type":"text","text":"$$3","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Free for a limited launch period — grab it now."}]},{"type":"paragraph","content":[{"type":"text","text":"A small component that can save you from rebuilding the same functionality again and again."}]}]},"introduction":"Customizable back to top button","slug":"back-to-top-flexible","author":{"framerUserId":"c1e20d0f-4ef0-4bef-bd07-2a8456906cb8","name":"Muthu","slug":"muthu-somasundaram","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/88j1wx75","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c1e20d0f-4ef0-4bef-bd07-2a8456906cb8/01a0ec60-845c-7764-b91d-b16487bf3176.png","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-29T08:14:17.987Z","updatedAt":"2026-09-29T08:55:59.966Z","publishedAt":"2026-09-29T08:14:17.984Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Scrolltotopprogresslatest-lA07R3.js@ZS7VNWeNNJiD9ZEKIQRX","previewUrl":"https://back-to-top-button.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"ZS7VNWeNNJiD9ZEKIQRX","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-29T08:14:18.640Z","updatedAt":"2026-09-29T08:14:18.640Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L55"}]