Laravel&Angular/Vue实现可滚动子菜单及跨页面锚点跳转的技术咨询

Hey there! Let's tackle your questions one by one, with practical details and actionable recommendations:

Your requirement covers two key scenarios, and here's how to handle each smoothly:

• Same-page scroll: First, assign a unique id to your target section (e.g., <section id="testimonials">). For the dropdown menu link, use this id as the anchor (like #testimonials). To avoid sudden jumps and add a polished feel, enable smooth scrolling with CSS:

  html { scroll-behavior: smooth; }
  

  For more control, you can use JavaScript's scrollIntoView() method to trigger scrolling when the link is clicked.
• Cross-page jump + scroll: When the user is on another page (like Contact), the dropdown link should point to the About page plus the anchor: /about#testimonials. On the About page, add logic to detect the URL hash on load and scroll to the corresponding section. Here's a vanilla JS example:

  window.addEventListener('load', () => {
    const hash = window.location.hash;
    if (hash) {
      const targetElement = document.querySelector(hash);
      if (targetElement) {
        targetElement.scrollIntoView({ behavior: 'smooth' });
      }
    }
  });
  

Absolutely—both frameworks offer clean, maintainable ways to implement this feature:

• Vue: Use Vue Router's built-in scroll behavior to handle scrolling automatically. In your router configuration file:

  const router = createRouter({
    // ... other router setup
    scrollBehavior(to, from, savedPosition) {
      if (to.hash) {
        return {
          el: to.hash,
          behavior: 'smooth'
        };
      }
      return savedPosition || { top: 0 };
    }
  });
  

  Then, use <router-link> for your dropdown items:

  • Same page: <router-link to="#testimonials">Testimonials</router-link>
  • Cross page: <router-link :to="{ path: '/about', hash: '#testimonials' }">Testimonials</router-link>

• Angular: Leverage the Router and ElementRef to achieve this. First, set up your link like:

  <a routerLink="/about" fragment="testimonials">Testimonials</a>
  

  Then, add scroll logic in your About component:

  import { Component, OnInit } from '@angular/core';
  import { ActivatedRoute } from '@angular/router';
  import { ElementRef } from '@angular/core';
  
  @Component({
    selector: 'app-about',
    templateUrl: './about.component.html',
    styleUrls: ['./about.component.css']
  })
  export class AboutComponent implements OnInit {
    constructor(private route: ActivatedRoute, private el: ElementRef) {}
  
    ngOnInit(): void {
      this.route.fragment.subscribe(fragment => {
        if (fragment) {
          const target = this.el.nativeElement.querySelector(`#${fragment}`);
          if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
          }
        }
      });
    }
  }
  

  You can also enable scrollPositionRestoration in your Angular Router config for better overall scroll behavior.

First off: this anchor-based navigation is not a bad practice—when implemented well (with smooth scrolling and clear visual feedback), it’s actually a great way to help users navigate long pages or jump directly to relevant content across pages.

As for whether to remove submenus and keep all service content on the About page, it depends on two core factors:

• Content length: If each service only has a short blurb (a few sentences, no extra details), keeping everything on the About page makes sense—users won’t need to jump between pages, and the experience feels more seamless.
• User intent: If users expect to see detailed information for each service (like pricing, case studies, or step-by-step breakdowns), separate pages are better. They let users focus on one service at a time without scrolling through unrelated content.

A middle ground could be: keep service previews on the About page with "Learn More" links that either scroll to a detailed section further down or navigate to a dedicated service page—whichever fits your content and user needs best.

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