docs(jump-links): add non-contiguous demo

Author: zeroedin

elements/pf-jump-links/demo/non-contiguous.html

@@ -0,0 +1,104 @@
+<article class="content">
+  <section id="chapter-1">
+    <h1>Chapter 1</h1>
+  </section>
+  <section id="chapter-2">
+    <h2>
+      <a href="#chapter-2">Chapter 2</a>
+    </h2>
+  </section>
+  <section id="chapter-3">
+    <h2>
+      <a href="#chapter-3">Chapter 3</a>
+    </h2>
+    <section id="sub-chapter-1">
+      <h3>
+        <a href="#sub-chapter-1">Sub-chapter 3.1</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-2">
+      <h3>
+        <a href="#sub-chapter-2">Sub-chapter 3.2</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-3">
+      <h3>
+        <a href="#sub-chapter-3">Sub-chapter 3.3</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-4">
+      <h3>
+        <a href="#sub-chapter-4">Sub-chapter 3.4</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-5">
+      <h3>
+        <a href="#sub-chapter-5">Sub-chapter 3.5</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-6">
+      <h3>
+        <a href="#sub-chapter-6">Sub-chapter 3.6</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-7">
+      <h3>
+        <a href="#sub-chapter-7">Sub-chapter 3.7</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-8">
+      <h3>
+        <a href="#sub-chapter-8">Sub-chapter 3.8</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-9">
+      <h3>
+        <a href="#sub-chapter-9">sub-chapter 3.9</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-10">
+      <h3>
+        <a href="#sub-chapter-10">Sub-chapter 3.10</a>
+      </h3>
+    </section>
+  </section>
+  <section id="chapter-4">
+    <h2>
+      <a href="#chapter-4">Chapter 4</a>
+    </h2>
+  </section>
+  <section id="chapter-5">
+    <h2>
+      <a href="#chapter-5">Chapter 5</a>
+    </h2>
+    <section id="sub-chapter-11">
+      <h3>
+        <a href="#sub-chapter-11">Sub-chapter 5.1</a>
+      </h3>
+    </section>
+    <section id="sub-chapter-12">
+      <h3>
+        <a href="#sub-chapter-12">Sub-chapter 5.2</a>
+      </h3>
+    </section>
+  </section>
+</article>
+
+<pf-jump-links vertical>
+  <pf-jump-links-item href="#sub-chapter-1">Sub-chapter 3.1</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-2">Sub-chapter 3.2</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-3">Sub-chapter 3.3</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-4">Sub-chapter 3.4</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-5">Sub-chapter 3.5</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-6">Sub-chapter 3.6</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-7">Sub-chapter 3.7</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-8">Sub-chapter 3.8</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-9">Sub-chapter 3.9</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-10">Sub-chapter 3.10</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-11">Sub-chapter 5.1</pf-jump-links-item>
+  <pf-jump-links-item href="#sub-chapter-12">Sub-chapter 5.2</pf-jump-links-item>
+</pf-jump-links>
+
+<script type="module">
+  import '@patternfly/elements/pf-jump-links/pf-jump-links.js';
+</script>