improve dropdown button on timeline

_data/theme.yml

@@ -60,8 +60,8 @@ map-cluster-radius: 25 # size of clusters, from ~ 10 to 80
 # TIMELINE PAGE
 #
 # set either year-navigation or year-nav-increment to generate a year nav dropdown
-year-navigation: #"1900;1905;1910;1915;1920" # manually set years to appear in dropdown nav
-year-nav-increment: 1 # set increments to auto gen nav years
+year-navigation: "2010;2000;1990;1975;1950;1925;1900;1850;1800;1700;1600;1500;1250;1000;500;300;0;-500;-1000;-10000" # manually set years to appear in dropdown nav
+year-nav-increment: 50 # set increments to auto gen nav years
 
 ##########
 # DATA 

_data/translations.yml

@@ -700,6 +700,6 @@ _layouts:
       de: "Jahre"
   timeline_edtf.html:
     years:
-      en: "Years"
-      es: "Años"
-      de: "Jahre"
+      en: "Jump to year"
+      es: "Saltar al año"
+      de: "Springe zu Jahr"

_layouts/timeline_edtf.html

@@ -39,17 +39,55 @@
     <div class="dropdown-menu" aria-labelledby="yearButton">
       {% for y in navYears %}
         {% assign year_parts = y | split: ':' %}
-        {% if year_parts.size == 2 %}
+        {% if year_parts.size >= 2 %}
           <a class="dropdown-item" href="#y{{ year_parts[1] }}">{{ year_parts[0] }}</a>
         {% else %}
-          <a class="dropdown-item" href="#y{{ y }}">{{ y }}</a>
+          <a class="dropdown-item" href="#" onclick="scrollToYear(event, {{ y }})">{{ y }}</a>
         {% endif %}
       {% endfor %}
     </div>
   </div>
 {%- endif -%}
 
 {{ content }}
+
+<script>
+  function scrollToYear(event, year) {
+    // Prevent the default link behavior
+    event.preventDefault();
+
+    // Try to find the exact element with data-numericyear equal to the target year
+    let element = document.querySelector(`[data-numericyear="${year}"]`);
+
+    // If no exact match, find the nearest year
+    if (!element) {
+      const yearElements = Array.from(document.querySelectorAll('[data-numericyear]'));
+
+      // Find the element with the closest data-numericyear value
+      let closestElement = null;
+      let closestDifference = Infinity;
+
+      yearElements.forEach((el) => {
+        const elementYear = parseInt(el.getAttribute('data-numericyear'), 10);
+        const difference = Math.abs(elementYear - year);
+
+        if (difference < closestDifference) {
+          closestDifference = difference;
+          closestElement = el;
+        }
+      });
+
+      // Set the closest element as the target to scroll
+      element = closestElement;
+    }
+
+    // Scroll to the found element if it exists
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' });
+    }
+  }
+</script>
+
 {% comment %}uncomment the next lines to display a heading indicating the period of the data in text form{% endcomment %}
 {% comment %}
   <h2>
@@ -78,7 +116,7 @@ <h2>
   <tbody>
     {% for date in sorted_years %}
       {% assign year = date | split: ':' %}
-      <tr id="y{{ year[1] }}">
+      <tr id="y{{ year[1] }}" data-numericyear="{{ year[2] }}">
         <th>
           <h3>{{ year[0] }}</h3>
         </th>

_plugins/sort_edtf.rb

@@ -12,7 +12,7 @@ def sort_edtf(array_of_strings)
       end
 
       sorted_dates = processed_dates.sort_by { |date| -date[:numeric] }
-      sorted_dates.map { |date| "#{date[:display_format]}:#{date[:original]}" }
+      sorted_dates.map { |date| "#{date[:display_format]}:#{date[:original]}:#{date[:numeric]}" }
     end
 
     private