How to Add Anchor Links to Your Slides Template

Sometimes, it’s useful to be able to jump to a particular part of a webpage. This is usually done by marking a section of a webpage with a fragment identifier (also called anchor identifier) and navigating to it with a URL that ends with #, followed by the fragment identifier, e.g. http://example.com#section_1.

This article will show you how to add such anchor links to a Slides website as well as how to configure the URL containing the fragment identifier.

Adding an Anchor to a Slide

To add an anchor link to a slide, use the data-name attribute. The value of the attribute will be the identifier that will be used to link to that slide.

<section class="slide" data-name="slide1">
  <div class="content">
    <div class="container">
      <div class="wrap">
        <!-- Slide content -->
      </div>
    </div>
  </div>
</section>

After adding data-name to a slide, you can now navigate to that slide with the page’s URL ending with #, followed by the value of data-name, e.g. http://example.com#slide1.

Disabling URL Updating on Slide Change

After adding an anchor link to a slide, you can navigate to it with a link that contains the anchor identifier (http://example.com#slide1) or by using the navigation menu (the navigation dots/controls).

By default, when you click on a navigation dot of a slide that has the data-name attribute, the URL shown on the browser will update to include the anchor identifier (http://example.com#slide1).

You can turn off the default URL hash setting function on slide change by adding the following code after the main slides.js script.

<script src="js/slides.min.js?512351" type="text/javascript"></script> <!-- Find this at the bottom of the HTML file, then add the below script to the page -->

<script>
  window.setHashLink = 0;
</script>

With that, when you navigate to a slide with the data-name attribute by clicking on its navigation dot, the URL won’t change.

Note that for Slide websites that have the scroll effect disabled, even without the above setting, the URL won’t update to include the anchor identifier if a dot for a slide with the data-name attribute is clicked.