如何在One Page Scroll分页中获取并显示data-attribute（年份）

Got it, let's get your One Page Scroll component showing those year values from each section's data-year attribute instead of the default slide numbers. Here's a straightforward, step-by-step solution:

Step 1: Ensure Proper Initialization of One Page Scroll #

First, confirm your One Page Scroll setup has pagination enabled (since you’re already seeing slide numbers, this is likely on, but let’s lock it in). Your initialization code should look like this:

$(document).ready(function() {
  $("#main").onepage_scroll({
    sectionContainer: "section", // Target your section elements
    pagination: true, // Keep pagination turned on
    loop: false, // Adjust based on your project needs
    // Add this callback to update the active year when scrolling finishes
    afterMove: function(index) {
      // One Page Scroll uses 1-based indexing, so subtract 1 for jQuery's 0-based selection
      const currentYear = $("#main section").eq(index - 1).attr("data-year");
      
      // If you have a dedicated element to show the current year (e.g., <div id="current-year"></div>)
      $("#current-year").text(currentYear);
    }
  });
});

Step 2: Replace Pagination Numbers with Year Values #

One Page Scroll generates pagination items with numbers by default. We’ll overwrite those with the data-year values from each matching section:

Add this code right after the One Page Scroll initialization (still inside the $(document).ready() block):

// Map each pagination item to its section's data-year value
$(".onepage-pagination li").each(function(paginationIndex) {
  const sectionYear = $("#main section").eq(paginationIndex).attr("data-year");
  // Update the pagination link text to the year
  $(this).find("a").text(sectionYear);
});

Step 3: Set the Initial Year on Page Load #

Make sure the correct year shows up immediately when the page loads, before any scrolling happens:

Add this line right after initializing One Page Scroll:

// Set the initial display to the first section's year
const initialYear = $("#main section:first").attr("data-year");
$("#current-year").text(initialYear);

Step 4: Optional: Style the Pagination for Better Readability #

If you want the year-based pagination to look cleaner (instead of the default dots), add this custom CSS:

.onepage-pagination li a {
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  color: #333;
  padding: 6px 12px;
  font-size: 14px;
  text-decoration: none;
}

.onepage-pagination li.active a {
  color: #007bff; /* Highlight the active year with your brand color */
  font-weight: bold;
}

How It Works #

• The afterMove callback triggers every time scrolling completes, grabbing the data-year from the newly active section and updating your display element.
• We loop through auto-generated pagination items and map each one to its corresponding section’s year, replacing the default number.
• The initial year setup ensures the first section’s year is visible right when the page loads.

内容的提问来源于stack exchange，提问作者universal