Anchor link within inline content

[onetrev]

I'm trying to put an anchor link inside a GLightbox. It seems like it should be simple and just work (what's simpler than an anchor / hash link right?), but unfortunately clicking on the anchor link does nothing.

However, @gingerchew indicated this doesn't work because GLightbox copies the HTML in the "advanced description" slides, there are now two #anchor-point headings and you can't scroll to two different headings at the same time, even if one of them is completely hidden with CSS.

[onetrev]

I have a very hacky fix for anyone else looking for this. I used jQuery since it has to already be loaded on the site I'm working on. I'll revisit and refactor when I have time...

  lightbox.on('slide_after_load', (data) => {
    // data is an object that contain the following
    const { slideIndex, slideNode, slideConfig, player, trigger } = data;
  
    $( '.gslide .apply-button' ).on( 'click', function() {
      $(this).siblings( '.x-form-wrapper' )[0].scrollIntoView();
    });
  
  });

[gingerchew]

Boy does time fly! Here's a link to the promised codepen.

The pen shows how to fix the issue by just changing the id/href of the the links and targets.

So while the HTML is:

<div id="inlineSlideWrapper">
    <a href="#inlineAnchorTarget">Click Me</a>
    ...
    <div id="inlineAnchorTarget">Scroll here</div>
</div>

The slide HTML will be:

<div id="inlineSlideWrapper">
    <a href="#glightbox-inlineAnchorTarget">Click Me</a>
    ...
    <div id="glightbox-inlineAnchorTarget">Scroll here</div>
</div>