How to create anchor links between pages in Framer

Smooth navigation between different pages on your website is a common challenge when working with Framer. While scroll links work perfectly within a single page, many users wonder how to make a button on the homepage automatically navigate to a specific section on another page.

This guide will show you how to implement anchor links between pages using Framer's native Scroll Targets system, allowing you to create intuitive navigation experiences without custom code.

Why anchor links between pages matter for Framer sites

Traditional links simply take users to the top of a page, but that's not always ideal when you need to direct attention exactly where it matters. Here's why cross-page scroll links are valuable for different scenarios:

• Landing page navigation: Direct visitors from your homepage straight to specific sections like pricing, testimonials, or contact forms on other pages, reducing friction in the user journey and improving conversion rates by getting users where they need to be faster
• Effective call-to-action buttons: Create CTA buttons that don't just change pages but also position users exactly where they need to be to take action, which can improve conversion rates by eliminating the need for users to scroll and search
• Smart navigation menus: Allow your main menu to work both for users on different pages and those already on the correct page, all with a single configuration that adapts automatically to the user's current location
• Portfolios and case studies: In portfolio sites, enable links from the main gallery that lead directly to specific project sections like the design process or final results, creating a more fluid browsing experience for potential clients
• Documentation and resources: Facilitate navigation on content-heavy sites by allowing direct links from indexes or menus to specific sections of articles or guides, helping users find information faster without endless scrolling

Understanding the Scroll Targets system in Framer

Framer handles scroll links differently than other platforms. Instead of using HTML IDs and URLs with # symbols, Framer uses a visual Scroll Targets system that you configure directly from the interface.

The process works in two steps: first you define which sections can be scroll destinations, and then you link clickable elements to those destinations. The beauty of this system is that it works both for links within the same page and for links between different pages on your site.

Important limitation: Scroll targets only work within your own Framer site. You cannot create links with scroll targets that direct to external pages or sites you don't control.

How to configure Scroll Targets in Framer

Scroll Targets work for both links within the same page and links between different pages on your site. The process has two main steps: first create the target in the destination section, then link an element to that target.

Step 1: Create the Scroll Target in the destination section

Setting up the destination for your scroll link is straightforward:

1. Select the container element of the section where you want users to land (Frame or Stack)
2. In the properties panel, turn on the Scroll Target option
3. Assign a descriptive name like "pricing-section" or "contact"

Step 2A: Link to a section on the same page in Framer

For links that scroll within the current page, follow these steps:

1. Select the clickable element (button, text, etc.)
2. Add a Link from the properties panel
3. In Link To, select the current page
4. In Target, select the scroll target you created
5. Enable Smooth Scroll (optional but recommended)

Step 2B: Link to a section on another page in Framer (between pages)

For links that navigate to a different page and scroll to a section, the process is similar with one key difference:

1. Select the clickable element
2. Add a Link from the properties panel
3. In Link To, select the destination page
4. In Target, select the scroll target from that page
5. Enable Smooth Scroll (optional but recommended)

Important: The order matters. First select the page, then the target menu will appear showing the available targets on that page.

Quick recommendations for Framer Scroll Targets

Getting the most out of scroll targets requires following some best practices:

Target naming conventions:

• Use descriptive names: "hero-main", "testimonials", "contact-form"
• Keep consistency: always use hyphens or always use camelCase, no spaces
• Avoid generic names: "section1" or "info" will be hard to identify later

Smooth Scroll settings:

• Enable it for more professional transitions
• Remember that users with Reduce motion system preference will see instant scrolling (this is intentional for accessibility)

Troubleshooting common Framer anchor link issues

Here's how to fix the most common problems you might encounter:

• Scroll Target doesn't appear in the dropdown menu: Verify that you've first selected the correct page in Link To, since targets are page-specific. Confirm that the Scroll Target property is enabled on the destination element and has an assigned name. If the target still doesn't appear, make sure it was created on the destination page and the element is visible in the layout.

• Link navigates to the page but doesn't scroll to the section: Check that you've selected both the page and the target in the two dropdown menus. Verify that the scroll target name hasn't changed after creating the link. Make sure the element with the target is visible and not hidden inside an invisible element.

• Smooth Scroll doesn't work: Confirm that the Smooth Scroll checkbox is marked in the link settings. Keep in mind that users with the Reduce motion system preference enabled will see instant scrolling, which is intentional for accessibility, not a bug. Test in different browsers and verify you don't have custom code interfering with the scroll behavior.

• Target appears in the list but link doesn't work: Ensure the target element is actually on the canvas and not accidentally deleted. Check that the target name doesn't contain special characters or spaces that might cause conflicts. Verify that the destination page is published and accessible.

Frequently asked questions about anchor links between pages in Framer

How do I create anchor links between pages in Framer?

Enable the Scroll Target property on your destination section and assign it a name. Then select your clickable element, add a Link, choose the destination page in Link To, and select the Scroll Target in the Target menu. Optionally enable Smooth Scroll for an animated transition. This works for both same-page and between-page navigation.

What are Scroll Targets in Framer and what are they used for?

Scroll Targets are visual markers you define on specific sections of your pages to make them navigation destinations. They allow you to create links that automatically position users at a specific section when the page loads, without needing code. This native Framer feature works seamlessly across your entire site.

Why doesn't my Scroll Target appear in the options menu?

Verify that you've selected the correct page in Link To first, since targets are page-specific. Confirm that the Scroll Target property is enabled and has an assigned name. Scroll targets without names don't appear in the list. If you still don't see it, refresh the Framer interface or check that the target element is visible on the canvas.

Can I use Scroll Targets on the same page and between different pages in Framer?

Yes, they work in both cases. For the same page, select the current page in Link To and the desired target. For different pages, select the destination page and then its scroll target. Remember that scroll targets only work within your Framer site, not on external pages or sites you don't control.

What's the difference between a regular link and a Scroll Target link in Framer?

A regular link takes users to the top of a page, while a Scroll Target link navigates to a specific section on that page. Scroll Target links provide more precise navigation control, helping users land exactly where they need to be without manual scrolling. This improves user experience and can boost conversion rates on key pages.

Does Smooth Scroll work on mobile devices in Framer?

Yes, Smooth Scroll works on mobile devices, but users who have enabled Reduce motion in their device settings will see instant scrolling instead of smooth animation. This is an intentional accessibility feature that Framer respects. The functionality remains the same; only the animation behavior changes based on user preferences.

Can I link to multiple sections on the same destination page in Framer?

Absolutely. You can create as many Scroll Targets as you need on a single page, and different buttons or links can point to different targets on the same destination page. This is useful for creating multiple entry points to a page based on user context or the previous page they came from.

How do I know if my Scroll Target is working correctly in Framer?

The best way to test is to publish your site and test the links in a live environment. Click your linked element and verify that it both navigates to the correct page and scrolls to the designated section. You can also test in preview mode, but live testing provides the most accurate results for between-page functionality.

Can I use Scroll Targets with external links in Framer?

No, Scroll Targets only work within your Framer site. If you need to link to external pages, you'll use regular URL links that take users to the top of that external page. The Scroll Target system is designed specifically for internal navigation within your Framer project.

What happens if I delete a section that has a Scroll Target in Framer?

If you delete a section with a Scroll Target, any links pointing to that target will break. The links will still navigate to the page, but they won't scroll to any specific section since the target no longer exists. It's good practice to audit your scroll links after making major structural changes to your site.

Conclusion

Anchor links between pages completely transform how visitors navigate your Framer site, enabling more intuitive and targeted experiences. By implementing Framer's native Scroll Targets system, you can create sophisticated navigation without custom code, keeping your project clean and easy to maintain.

Whether you're building a single-page site, a complex portfolio with multiple projects, or a landing page with different information sections, this functionality lets you guide users exactly where they need to be with just a few clicks. The combination of Framer's visual interface and powerful scroll targeting creates seamless user experiences that improve engagement and conversion rates.

Need help implementing this solution or exploring more advanced use cases? At our specialized Framer agency, we create custom solutions that enhance your site's functionality while maintaining clean, professional designs. Don't hesitate to reach out to discuss how we can optimize navigation for your Framer project.