Streaming live at 10am (PST)

Page jumps to top of page on modal open


#1

Could use some help on this issue.. whenever the gallery modal opens up the page skips to the top of the page. It's a dynamic Lightbox setup. Here it is in action when you click on one of the photo gallery items.

http://aurora-borealis-yukon.webflow.io/tour/5-day-winter-adventure-tour

And here is the read only link:
https://preview.webflow.com/preview/aurora-borealis-yukon?preview=6dec881aeef2f6ec0483d8a677183492

I suspect that there's a div with a height that spans beyond the browser height, but I have tried setting the modal to 100vh without any luck.

Thanks for your help!


#2

I'm probably just very tired here but when I went to the read-only link I couldn't see the exact same site as the one that you linked to above it so couldn't find the photo gallery items in the preview version?

I can see what's happening but as I can't find it in any of the pages in your preview link then I can't really take a look at it.

I might be missing the page that it is on though?

Mark


#3

@Mark_Bowen The links should work. The page it happens is the Tours Template and the photo gallery section is where the modal opens up. Thanks for having a look :slight_smile:


#4

Hi again,

Sorry I can see the template you're referring to now, my mistake.

I may be wrong but are you not using the standard lightbox component that comes with Webflow? Are you perhaps rolling your own with your own javascript code perhaps?

I tried by placing in one of the standard Webflow lightbox links and that worked fine and didn't scroll the page back up to the top again.

I'm not sure quite why it's doing that to you as my Javascript chops aren't that good although obviously the links in yours have an href="#" which might be making the page jump to the top. Not totally sure that's what's causing it though.

Are you able to use the standard Webflow lightbox link component instead possibly?

Mark


#5

Actually not sure if this is the problem you're having or not but there's a post here mentioning this sort of behaviour :

Not sure if that might help at all?

Best wishes,

Mark


#6

@Mark_Bowen Thanks Mark, much appreciated for taking the time to look at this. I already have the preventDefault in my code, but it did make me look at the "No scroll" class I was adding on the Lightbox click. That was the culprit. I was removing the vertical scrollbar on the Lightbox and it pushed the content up the page as well. (position: fixed)

I'll just remove the no scroll class for now. I can't use the standard Lightbox because the content inside is dynamic!

Thanks for your help


#7

Ah excellent!

Glad you've got it sorted now.

Best wishes,

Mark