splide-extension-url-hash conflicts with other anchors on the page.

[bramp]

Checks

• Not a duplicate.
• Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

0.3.0

Description

On first load, the address bar is re-written to remove a anchor that is not one of the image hashes.

E.g mysite.com/#about-us, is re-written to just mysite.com/ and thus the browser does not scroll down to the about-us section.

Reproduction Link

No response

Steps to Reproduce

I have the following:

<section id="about-us">
...
</section>

<section id="gallery">
          <div class="splide" aria-label="Photo gallery">
            <div class="splide__track">
              <ul class="splide__list"><% _.each(slides, function(slide, index) { %>
                <li
                  class="splide__slide"
                  style="width: <%- slide.width %>px;"
                  <% if (index > 0) { %>
                  data-splide-hash="<%- slide.base %>"
                  <% } %>
                >
                    <img
                      src="engagement/<%- slide.base %>.jpg"
                      srcset="engagement/<%- slide.base %>_2x.jpg 2x"
                      type="image/jpeg"
                    />
                </li><% }); %>
              </ul>
            </div>
          </div>

          <script src="/js/splide.min.js"></script>
          <!--script src="/js/splide-extension-url-hash.min.js"></script-->
          <script type="text/javascript">
            document.addEventListener("DOMContentLoaded", function () {
              var splide = new Splide(".splide", {
                type: "loop",
                padding: "5rem",
                focus: "center",
                trimSpace: false,
                autoWidth: true,
                gap: "0.5em",
                width: "90vw",
              });

              splide.mount(/*window.splide.Extensions*/);
            });

The first image has no hash set, whereas the 2nd, 3rd, etc has image2, image3, etc. Leading to URLs such as mysite.com/, mysite.com/#image2, mysite.com/#image3.

If I type mysite.com/#about-us (which is not one of the gallary images) into my address bar the page does not scroll down to the correct section, instead the address bar quickly gets re-written to just mysite.com. Interesting if I then append #about-us in the address bar, and hit enter, it seems to work as intended.

Expected Behaviour

The library respects the hash, and allows the browser to scroll to the appropriate section of the page.