页面加载时水平滚动至指定中间位置的技术实现咨询

阿华AIGC实验室

2026-5-19

Solution: Scroll to "Present" Section Only On Page Load

Absolutely feasible! You can achieve this by triggering a one-time scroll to your "Present" element when the page finishes loading—no more forced continuous scrolling. Here's how:

Step 1: Identify Your Target Element

First, make sure the element labeled "Present" has a unique ID so we can easily target it. If it doesn't already have one, add it like this:

<div id="present-section">Present</div>

Step 2: One-Time Scroll on Page Load

Use vanilla JavaScript to scroll to the element only once when the page loads. This avoids the endless loop issue from your previous pageScroll() function.

Add this script to your page (either at the end of the <body> tag, or wrapped in a load listener):

window.addEventListener('load', function() {
  // Get the "Present" element by its ID
  const presentElement = document.getElementById('present-section');
  
  // Only run if the element exists
  if (presentElement) {
    // Scroll the element to the center of the viewport
    presentElement.scrollIntoView({
      behavior: 'smooth', // Optional: remove this line for an instant jump
      block: 'center',    // Align vertically to the center
      inline: 'center'    // Align horizontally to the center
    });
  }
});

Why This Works

The load event fires only once when the entire page (including images and assets) is fully loaded.
scrollIntoView() scrolls the element into view and stops immediately—no repeated execution, so users can freely scroll left/right afterward.
The options let you control exactly how the element aligns with the viewport (we're using center alignment here, which matches your request).

Alternative: No JavaScript (Anchor Link)

If you prefer a non-JS approach, you can use an anchor link:

Add an ID to your "Present" element (same as Step 1).
Append #present-section to your page URL (e.g., yourpage.html#present-section). This will jump to the element on load, but note it will modify the browser's URL.

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