Anchor links in modal

Design help General
1

I’m trying to use anchor links in a modal, and it’s not working as I expected. In my example, I want the modal to scroll to Section 2 when I click the “Section 2” link at the top.

https://preview.webflow.com/preview/grays-top-notch-site?utm_medium=preview_link&utm_source=designer&utm_content=grays-top-notch-site&preview=3cc793cda2827c168715982e48f179fd&workflow=preview

Thanks!

Gray

2

Hey @garybones, so the only way I can think of doing it is by adding the scroll to the section on the animation that opens up the modal. Just wrap all your content inside the modal in a div, make the modal overflow hidden, and then move the wrapper div up? I hope this helps

1 Like
3

@Pablo_Cortes Thanks for your help although I don’t completely follow what you are saying. Can you please explain a little more? Thank you.

1 Like
4

So what I mean is making the content animate (move) tho where you want, however, that would mean that you have to do an animation for each anchor. You can try this piece of custom code

$('.item1').on('click',function(){ requestAnimationFrame(() => 

    $('#contributors').animate( { scrollTop: $('#item1').offset().top -40 }, 500)

)});

where .item1 is your button class, and #contributors is the id of your anchor, the -40 is the distance, and the 500 is the duration, so you should adjust them accordingly. I hope this helps.

1 Like
5

Thanks for your help again. Unfortunately that is not working either. Any additional thoughts?

1 Like
6

Oh man that is too bad, Im out of options @garybones, I will suggest you though to get rid of the popup, I know that is a UI/UX choice, but not many websites use popups with that functionality, and I think there is a reason for that. So having said that, I would just use anchors within your page with a sticky menu or something like that. Good luck with your project!

1 Like
7

Can any body tell me i use it for Pinterest video downloader i want to use it for my site