Skip to main content

Scroll-to action in overlays

  • January 28, 2022
  • 8 replies
  • 3447 views

Karsten_Muller1

As written in the documentation (Prototype interactions and animations) the destination of a Scroll to action can only be an element of the same top-level frame. But with this limitation it is impossible to prototype a common navigation pattern.

On one-pagers there are often floating menu for intrapage links. E.g you have an hamburger icon that opens a menu overlay from where you can scroll to a specific page section. This can’t be realized with an Figma overlay because of the restrictions mentioned above.

There is a workaround, but it seems that it only works because of a bug: You can set the menu overlay as an child of the top-level frame of the one-pager, define the Scroll-to actions and then move the menu outside the frame (as an separate top-level layer) to show it later as an overlay. By doing this all the Scroll-to actions still work, but when you change an action the target will be rested and the navigation is broken.

Working Example

Maybe you can remove the restrictions that the destination of a Scroll-to action have to be on the same top-level frame for frames that are placed as an overlay.

8 replies

  • 0 replies
  • February 27, 2022

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.


Roeloff_van_Zyl

Hi, is it possible to apply a "scroll to" interaction from an Overlay to a section on the main page/frame?

Let me try to explain:
So, when the user hovers over an item, a pop-up overlay should appear. On this said overlay the user should be able to click on a button and then be anchored (scrolled) down to a specific point on the same page.

When I want to add a "scroll to" interaction to the button located in the overlay the only layers available for selection are the ones of the overlay, so I cannot select a point on the main page/frame

Am I missing a step or does this not exist?

TL;DR: How to apply an anchor interaction from an Overlay


I also want to be able to do this! But, because the overlay is its own frame, I don’t think I can.


y_toku
Figmate
  • Community Support
  • 2410 replies
  • April 23, 2024

Thank for the post.

Unfortunately, it is unavailable at the moment. As the article says, If you add Scroll to using the Interactions section of the Prototyping panel, you can only pick direct children of scrollable frames. To pick any object within the top-level frame, drag out a noodle and link it to the object you want to set as the destination.

There is an existing feature request thread, so let me merge into it.

Thanks!
Toku


Edwin Ties
  • New Member
  • 1 reply
  • January 19, 2025

I wanted to do this in my project too but couldnt make it work :(


Mait_Luidalepp

I find it hard to believe that Figma cannot still simulate dropdown navigation.
Is this real?


Karsten_Muller1
Mait_Luidalepp wrote:

I find it hard to believe that Figma cannot still simulate dropdown navigation.
Is this real?

This article is from 3 years ago. In the meantime, you can build a dropdown menu using components with variants. Just search for "figma dropdown menu with variants" on YouTube to find some tutorials.


EmberN
  • New Participant
  • 7 replies
  • May 12, 2025

i also need this for menu overlays pls. need it to scroll to a page right after clicking on the overlay menu on mobile. 


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings