This lesson was released before Agents, Branching, and the CMS update on June 16, 2026. Some UI may differ, but the core concepts still apply.
Benjamin
7:10
Link to sections with Scroll Targets in Framer
Use Scroll Targets in Framer to link directly to sections on the same page. Give each target a unique name, connect it to a text link or button, and enable smooth scrolling for an animated jump. This lesson also shows how fixed navigation and full-viewport sections fit into the setup.
Lesson details
In this Framer tutorial, you will learn Smooth Scrolling Links with Scroll Targets. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
Frequently asked questions
How do I link to a section in Framer?
Select the destination section and give it a unique Scroll Target name. Add a link to the trigger, choose the current page, and select that target as the destination.
How do I enable smooth scrolling to a section?
After choosing the page and Scroll Target in the link settings, enable smooth scrolling. Preview the page and adjust the section layout if the final position does not line up as expected.
Can several links point to different sections on one page?
Yes. Give every destination a different Scroll Target name, then connect each navigation item to its matching target. Unique names keep the links clear when the page has many sections.
Do Scroll Targets work with fixed navigation?
Yes. The lesson uses a fixed navigation that remains visible while the page moves between full-height sections. Check that the fixed element does not cover the start of the destination content.
Can I combine Scroll Targets with scroll effects?
Yes. Scroll Targets handle navigation to named sections, while scroll effects can animate elements during the movement or as sections enter view. Test both together so the motion remains easy to follow.