页面加载后能否保持滚动位置？购物车页面刷新回顶部问题求助

Hey Jimmy, I’ve dealt with this exact frustration on long e-commerce pages—nothing irks users more than losing their spot right after updating their cart! Let’s walk through three practical solutions, from quick fixes to a smoother, modern approach.

1. Quick Fix: Anchor Link Navigation #

This is the simplest way to keep users near the cart after a refresh, no heavy JS needed.

• Step 1: Add an ID to your cart section
  Find the container for your bottom cart and give it a unique ID, like:

  <div id="cart-container" class="bottom-cart">
    <!-- Your cart content here -->
  </div>
  

• Step 2: Append the anchor to your form action
  Update all your add/remove item forms to point to the page plus the anchor:

  <form action="cart.php#cart-container" method="post">
    <!-- Form fields (item ID, action type, etc.) -->
    <button type="submit" name="add_to_cart">Add to Cart</button>
  </form>
  

• Step 3: Use anchors in PHP redirects (optional)
  If you’re using header() to redirect after processing cart actions (to avoid duplicate form submissions), include the anchor there too:

  // After handling add/remove logic
  header("Location: cart.php#cart-container");
  exit;
  

  This ensures even if the page redirects, it lands right on the cart.

2. Best Experience: AJAX (No Page Refresh) #

For a seamless experience, ditch full-page refreshes entirely and handle cart actions asynchronously. This way, users never leave their scroll position at all.

Example Implementation: #

• First, update your buttons to trigger JS instead of submitting forms
  Replace your submit buttons with regular buttons that have data attributes for item IDs:

  <button class="add-to-cart-btn" data-item-id="123">Add to Cart</button>
  <button class="remove-item-btn" data-item-id="123">Remove Item</button>
  

• Add JavaScript to handle async requests
  Use native JS (or jQuery if you’re already using it) to send cart actions to your PHP handler and update the page dynamically:

  // Handle add to cart
  document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      e.preventDefault();
      const itemId = btn.dataset.itemId;
  
      const response = await fetch('cart-handler.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `action=add&id=${itemId}`
      });
  
      const result = await response.json();
      // Update cart UI elements (e.g., item count, cart items list)
      document.getElementById('cart-item-count').textContent = result.totalItems;
      document.getElementById('cart-items-list').innerHTML = result.cartHtml;
    });
  });
  
  // Handle remove item (similar logic)
  document.querySelectorAll('.remove-item-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
      e.preventDefault();
      const itemId = btn.dataset.itemId;
  
      const response = await fetch('cart-handler.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `action=remove&id=${itemId}`
      });
  
      const result = await response.json();
      document.getElementById('cart-item-count').textContent = result.totalItems;
      document.getElementById(`cart-item-${itemId}`).remove();
    });
  });
  

• Create a PHP handler file (cart-handler.php)
  This file will process the cart actions and return JSON with updated data:

  session_start();
  // Your existing cart logic (add/remove items) goes here
  $action = $_POST['action'] ?? '';
  $itemId = $_POST['id'] ?? '';
  
  // Process action...
  
  // Prepare response data
  $response = [
    'totalItems' => count($_SESSION['cart']),
    'cartHtml' => renderCartHtml() // Function to generate updated cart HTML
  ];
  
  echo json_encode($response);
  exit;
  

  This approach keeps the page intact, so scroll position never changes.

3. Fallback: Restore Scroll Position with PHP + JS #

If you can’t use AJAX right now, you can save the user’s scroll position before the page refreshes and restore it after loading.

• Step 1: Capture scroll position on form submit
  Add JS to inject the current scroll position into your form as a hidden field:

  document.querySelectorAll('form.cart-form').forEach(form => {
    form.addEventListener('submit', () => {
      const scrollPos = window.pageYOffset;
      const hiddenInput = document.createElement('input');
      hiddenInput.type = 'hidden';
      hiddenInput.name = 'scroll_pos';
      hiddenInput.value = scrollPos;
      form.appendChild(hiddenInput);
    });
  });
  

• Step 2: Save position to session in PHP
  At the top of your cart page, store the scroll position in the session after processing the cart action:

  session_start();
  if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Process add/remove logic first...
    $_SESSION['scroll_position'] = $_POST['scroll_pos'] ?? 0;
  }
  

• Step 3: Restore position on page load
  Add this JS at the bottom of your page to scroll to the saved position:

  window.addEventListener('load', () => {
    <?php if (isset($_SESSION['scroll_position'])): ?>
      window.scrollTo(0, <?php echo $_SESSION['scroll_position']; ?>);
      <?php unset($_SESSION['scroll_position']); // Clear after using ?>
    <?php endif; ?>
  });
  

My recommendation? Start with the anchor link fix for a quick win, then gradually move to AJAX for the best user experience. Both will eliminate that annoying jump to the top!

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