页面加载未从顶部启动，show_results脚本相关问题求助

Hey there! Let's break down why your page isn't loading at the top and how to fix it—first off, the position: relative CSS you added won't affect the page's scroll position at all. That property only changes how the element itself is positioned relative to its normal flow, not where the viewport starts when the page loads.

Here are the most likely culprits and actionable solutions:

1. Check the #show_results script for scroll-triggering code #

The script tied to #show_results is probably explicitly scrolling the page to that element. Look for lines like these in your JS:

// Common methods that force scroll to the element
document.getElementById('show_results').scrollIntoView();
window.scrollTo(/* coordinates targeting the element */);

If you find this code:

• Remove it entirely if you don’t need the scroll-to-element behavior
• If you want to keep the script but still start at the top, add a post-load scroll-to-top action (see solution 2) after this code runs

2. Override anchor link auto-scrolling #

If your page URL ends with #show_results (e.g., yourpage.com#show_results), browsers automatically scroll to the element with that ID on load. To override this, add this JavaScript to force the page to jump to the top once fully loaded:

window.addEventListener('load', function() {
  // Scroll instantly to the top with no animation
  window.scrollTo({ top: 0, behavior: 'instant' });
});

If the #show_results script runs after the load event, add a small delay to ensure your scroll-to-top code executes last:

document.addEventListener('DOMContentLoaded', function() {
  setTimeout(() => {
    window.scrollTo(0, 0);
  }, 100); // Adjust the delay if needed (100ms is usually enough)
});

3. Rule out automatic element focus #

Sometimes form elements with the autofocus attribute or JS that calls .focus() on an element can pull the page scroll to that element. Check your HTML for:

<input type="text" autofocus>

Or JS like:

document.querySelector('input').focus();

Removing the autofocus attribute or the .focus() call will stop this unwanted scroll behavior.

Quick recap of your original misstep #

The #show_results { position: relative; } CSS doesn’t address scroll position—it only affects how the element sits within its parent container. That’s why it didn’t fix the issue. You need to target the browser’s scroll behavior directly with JavaScript or adjust the script that’s triggering the scroll.

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