How do I make a lightbox scroll to an anchor when closed?

Hi guys, the title says it all! My site has a store page, which once navigated to generates a lightbox, which explains that all items are currently on hold due to Covid-19. When the lighbox closes, it scrolls to the top of the background page - however, I would like it to scroll to #anchor1, which is located between the page banner and the product list on the background page. How can I achieve this with code? This is the only page that a lightbox appears on.

The page is here: notenoughknife.com/store

Thanks in advance,
Matt

Have not tested this, but I expect it to work something like this:

import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
// ...
wixWindow.openLightbox("LightboxName")
  .then( (data) => {
    // Lightbox closed:
    // let receivedData = data; OPTIONAL
    // scroll to your element of choice
    $w("#myElement").scrollTo();
  } );

Scroll-to

Open Lightbox

wix-location

Perfect, thankyou so much, you’re a genius!

Stay safe,
Matt

I’m trying to figure out this exact thing, but I don’t know where to input this code? Did you put this on the lightbox itself, or on the page? I have a gallery that I want to use to open a lightbox, then show more images inside the lightbox, then close that and allow people to select other images in the gallery. But when I close the lightbox now it jumps to the top of the page. Your site seems to work great now, so I’m sure I’m just missing something on getting this to work. Thanks for any assistance.

@chadhamlet Hi Chad,

I put the code on the page itself. It used to be quite hit-or-miss whether the scrolling actually worked - the lightbox used to just ignore the anchor and scroll to the top of the page most of the time, but now it seems to work great (I actually only realised that thanks to your question!) I’m guessing they fixed the issues over the past year. They altered how the code worked a couple of years back and that caused some custom code to play up. I’m glad to see it’s working again. Try implementing the code on your main page, and let me know if you need more help. I’m not a Velo expert, but I’ve picked a few things up.

Best,
Matt

It seems that my issue is I don’t want the lightbox to open up automatically. I have several lightboxes that are attached to a gallery, and they open as expected. The only issue I have is when they close the site jumps back to the top. So maybe I need to add a different way of opening the lightboxes?

@chadhamlet To stop the image opening automatically, click on the light box and navigate to the “no” button shown in the below image.

Do you have a link to your site?

Ha. Well, it seems that the Preview version of the site is the issue. I published the site and now the issue is completely gone. I can open one of the gallery images into a lightbox window and it when it closes the site stays exactly where it was. That was several hours of fighting an issue that wasn’t there! Here is the site, feel free to look at it and let me know if the lightbox works for you like it’s working for me. Thanks for the help as well!

PS: The site isn’t complete, just getting the bones set up right now.

I can’t tell you the amount of times I’ve had issues with preview/live site behaviour haha. It’s usually the other way around for me though - the preview site works perfect and the live site won’t work… usually when I add custom code for collapsable strips. Sometimes it’s best to find a workaround, then tackle the issue further down the line - gives you more time to learn code and gives Wix time to patch any issues.

I’m glad your site is working well now. I just checked it out and you’re off to a good start! Lightboxes seem to be working fine on desktop, although some images seem super lo-res. I’m looking forward to checking it out once you’ve finished adding text and optimising the mobile view. I’m eager to find out your connection with the games on your site, a lot of them are favourites of mine.

1 Like

I also just noticed that Pro Skater is the only lightbox that doesn’t generate a cross to close it. All other images have an exit cross, but for Tony Hawk I have to click the background.

Yeah, somehow I deleted the X even though there is the flag to turn it off an on. I’m looking to have the site all done by this weekend, would definitely like to know what you think. This is a site to showcase the amalgamation of the work I’ve done in the industry in various roles. Art Direction, Lead Artist, Concept artist, etc…

I see you’ve now fixed that issue, and filled in the text. Your video game work is super impressive. I’d love to give my input on your site and provide more feedback / ideas. I’m a perfectionist with two websites, and I’ve been learning Wix since 2015 - and during that time I’ve implemented three major overhauls to the main site. If you’d rather talk elsewhere, my email is contact@wfsenior.co, and my Instagram is @wfsenior.

@chadhamlet I just checked back in and your site is looking so much better. It works great in desktop and mobile now, and great to see the premium URL. For a couple of finishing touches, I’d say there’s no need to have a home button on the header seen as your logo links to the homepage. There’s also no need to have the links to each section in the footer, seen as you have a scrolling header. And maybe align the social icons to the right, so they mirror your location info. Other than that you’re good to go! Just be sure to edit the SEO, as your site currently displays “top| My Site” on tabs, instead of “Chad Hamelt”.

@wfsenior Thanks a lot Matt. I updated some of the things you suggested. I had some friends say that on mobile the development section was getting cut off, so had to redo a bit of that. May still tweak it some more as I go along. I didn’t even know about the SEO settings so set that too. Doesn’t seem that updates fast so I guess I’ll see if/when that changes.
Thanks again for the help.

1 Like

@chadhamlet The changes all look a lot better and the SEO has updated nicely. Your friends are right, the text is getting cut off, but that should be an easy fix. If you’re feeling brave, you could learn code to hide/show text, like on my page here: [https://www.notenoughknife.com/theteam]((https://www.notenoughknife.com/theteam)

Going forwards it’s always about refinement. Always ask yourself if you need a specific element on your site, simplicity is usually the best answer. Anyways I’m glad I could help! I’m always here if you want any feedback/tips in the future.

Best,
Matt

1 Like

I’m actually having the same problem right now, on a current build (parked at RothMX.com ) down at the “Surgical Procedures” section a few sections down from the top. Click any item in that section, and the lightbox it pops up scrolls you back to the top of the page when you close it with the X, however, I want it to stay in that section (or anchor) so that they can keep clicking on procedures/services after they close each one out. — I saw your code up top, but I have no clue where to paste it, if that’s even the same code for my issue, and which exact piece of it I need to customize to my anchor or section. – If you’re able to, Thank You for your help!!

Hi there,

I just tested your site and all seems to be working as intended. Hopefully you’ve fixed your issue, if you run into any issues in the future, I’m happy to help if I can.

Best,
Matt

1 Like

I really appreciate your reply, much less it being so timely! I did realize that the problem I was having is not actually a problem on most browsers, however, now I’m having a new similar problem which I don’t know if there’s an actual solution to. ------ I have a couple of long Lightboxes on the same website, but when you get to the bottom of the lightbox, there’s no way back to the top of the lightbox. ------- Evidently you can’t add an anchor to a lightbox. I also tried to set create “back to top” text as a link and try to select the same lightbox I’m in as the target, but you can’t do that either. At RothMX.com the “Our Staff” menu item at the top opens the lightbox I’m talking about. Do you have any kind of design support or Wix help services you offer as well? Thank You very much! I’m at the last mile of this build, and I hate to run into last little issues like this. Really hoping there’s a way out! Cheers! -Ryan

Hi Ryan,

You’re very welcome! Unfortunately, I don’t offer any design support or Wix help services. I’m an artist, focusing mostly on short films and music, but I had to learn to code in Velo for my website, so I’m happy to help where I can!

On mobile, your “Our Staff” button works great, on desktop it works great too. But your “back to top” button closes the lightbox, so I’d remove that. Scrolling to the top of the lightbox works perfect on my end.

If you’re still having issues, it may be worth creating a separate page for the team members, but I think after you remove that “back to top” button you should be good to go!

Site is looking good.

Best,
Matt