Angular路由加载新视图时实现页面平滑滚动至目标区域

Hey Kyle, let's figure out how to get that smooth scroll working exactly how you want it! Below is a clean, modern solution using vanilla JavaScript (no fancy frameworks required) that handles both loading your new view and scrolling to it smoothly in a set duration.

We’ll break this down into three simple parts: setting up your HTML structure, adding basic styling, and writing the core JavaScript logic to handle clicks and scrolls.

Step 1: HTML Structure #

First, let’s map your navigation links to their target sections. We’ll use a data-target attribute on each link to point directly to the ID of the section we want to scroll to:

<!-- Navigation Menu -->
<nav class="main-nav">
  <ul>
    <li><a href="#" data-target="menu-view-1">First Menu Item</a></li>
    <li><a href="#" data-target="menu-view-2">Second Menu Item</a></li>
  </ul>
</nav>

<!-- Hero Banner -->
<section class="hero-banner">
  <!-- Your hero content goes here -->
</section>

<!-- Target Views (loaded when menu is clicked) -->
<section id="menu-view-1" class="content-view">
  <!-- Content for first view -->
</section>
<section id="menu-view-2" class="content-view">
  <!-- Content for second view -->
</section>

Step 2: Basic CSS (For Visibility & Spacing) #

Add some quick styling to make your sections distinct and ensure the scroll lands correctly below the hero banner:

.hero-banner {
  height: 450px; /* Adjust to match your hero's actual height */
  background: #f0f0f0;
  padding: 2rem;
}

.content-view {
  min-height: 700px; /* Ensures sections are scrollable */
  padding: 2.5rem;
  margin-top: 2rem;
  background: #f8f8f8;
  border-top: 1px solid #ddd;
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 1.2rem;
  background: #2d2d2d;
  margin: 0;
}

.main-nav a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

Step 3: JavaScript for Click Handling & Smooth Scroll #

This is the core logic. We’ll listen for menu clicks, load your new view, calculate the target position, and scroll smoothly to it with a custom duration:

// Grab all navigation links
const navLinks = document.querySelectorAll('.main-nav a');

// Set your desired scroll duration (in milliseconds)
const SCROLL_DURATION = 700; // Adjust this to make scroll faster/slower

navLinks.forEach(link => {
  link.addEventListener('click', async (e) => {
    e.preventDefault(); // Stop default link behavior
    
    // Get the target view ID from the link's data attribute
    const targetViewId = link.getAttribute('data-target');
    const targetView = document.getElementById(targetViewId);

    // 1. Load your new view here (replace with your actual logic)
    // Example: Fetch content via AJAX, toggle visibility, etc.
    // await loadNewView(targetViewId); // Use async/await if loading is asynchronous

    // 2. Calculate where we need to scroll to
    // Subtract header height if your nav is fixed (prevents view from being hidden under nav)
    const navHeight = document.querySelector('.main-nav').offsetHeight;
    const targetPosition = targetView.offsetTop - navHeight;

    // 3. Trigger smooth scroll (use custom function for precise duration control)
    smoothScrollTo(targetPosition, SCROLL_DURATION);
  });
});

// Custom scroll function for exact duration control (native smooth scroll doesn't let you set this)
function smoothScrollTo(targetPosition, duration) {
  const startPosition = window.pageYOffset;
  const distance = targetPosition - startPosition;
  let startTime = null;

  function animateScroll(currentTime) {
    if (startTime === null) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);

    // Optional easing function (makes scroll feel more natural)
    const ease = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;

    window.scrollTo(0, startPosition + (distance * ease));

    if (timeElapsed < duration) {
      requestAnimationFrame(animateScroll);
    }
  }

  requestAnimationFrame(animateScroll);
}

Quick Notes to Customize: #

• View Loading: Replace the // await loadNewView(targetViewId); comment with your actual view loading logic—whether that’s fetching content, toggling section visibility, or swapping components. If your loading is asynchronous (like an API call), keep the async/await to ensure we only scroll after the view is ready.
• Header Offset: If your navigation is fixed to the top of the page, subtracting its height ensures the target view doesn’t get hidden under the nav when scrolling.
• Duration Control: The native window.scrollTo({ behavior: 'smooth' }) is simpler but doesn’t let you set an exact duration. Use the custom smoothScrollTo function if you need precise control over how long the scroll takes.

This setup will make every menu click load your desired view and smoothly scroll to its starting position below the hero banner—exactly what you’re looking for!

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