如何实现无ID无锚点、无刷新页面滚动到指定底部区域？

Hey there! Great observation about the PHP docs—they’re using JavaScript to handle that seamless scroll behavior instead of relying on URL hash anchors. Let’s walk through exactly how you can replicate this for scrolling to a specific bottom section of your page, no ID required and no page refreshes.

Core Idea #

The key is using JavaScript to directly target your desired element (via any CSS selector, not just IDs) and trigger a scroll action programmatically. Modern browsers have built-in methods that make this super straightforward.

1. Scroll to a Specific Element (No ID Needed) #

If your bottom section has a class, attribute, or even a unique tag structure, you can use document.querySelector() to grab it, then call scrollIntoView() to scroll smoothly to it.

Example Code: #

// Target your bottom section using a class selector (replace with your own)
const bottomSection = document.querySelector('.page-footer');

// Check if the element exists to avoid errors
if (bottomSection) {
  // Smoothly scroll to the element
  bottomSection.scrollIntoView({
    behavior: 'smooth', // Enables smooth scrolling animation
    block: 'start'      // Aligns the top of the element with the viewport top
    // Use 'center' to center the element, or 'end' to align its bottom with the viewport
  });
}

You can use any valid CSS selector here—like footer[data-section="bottom"], #main-container .bottom-content, or even just footer if it’s the only footer on the page. No ID required!

2. Scroll Directly to the Very Bottom of the Page #

If you don’t need to target a specific element and just want to scroll to the absolute bottom of the page, use window.scrollTo() with the total height of the document:

Example Code: #

// Smoothly scroll to the bottom of the entire page
window.scrollTo({
  top: document.documentElement.scrollHeight, // Total height of the page content
  behavior: 'smooth'
});

document.documentElement.scrollHeight gives you the full height of the page, including content that’s hidden outside the viewport.

3. Trigger Scroll on User Interaction (Like the PHP Docs) #

To mimic the PHP docs’ click-to-scroll behavior, add a click event listener to your trigger element (a button, link text, etc.) that fires the scroll action:

Example HTML + JavaScript: #

<!-- Your trigger element (could be any clickable element) -->
<p class="scroll-trigger">Scroll to bottom section ↓</p>

<!-- Your target bottom section -->
<footer class="page-footer">
  <!-- Bottom section content here -->
</footer>

<script>
  // Grab the trigger and target elements
  const scrollTrigger = document.querySelector('.scroll-trigger');
  const bottomSection = document.querySelector('.page-footer');

  // Add click event listener
  scrollTrigger.addEventListener('click', () => {
    if (bottomSection) {
      bottomSection.scrollIntoView({ behavior: 'smooth' });
    }
  });
</script>

Bonus: Compatibility Notes #

• The behavior: 'smooth' option works in all modern browsers (Chrome, Firefox, Edge, Safari 15.4+). For older browser support, you can use a polyfill or write a simple scroll animation with setInterval, but the built-in method covers most use cases today.
• Always check if the target element exists before calling scroll methods to avoid JavaScript errors.

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