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.
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>
data-name to a slide, you can now navigate to that slide with the page’s URL ending with
#, followed by the value of
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 (
You can turn off the default URL hash setting function on slide change by adding the following code after the main
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.