Laravel 8新增页面中滚动导航栏点击无效的解决咨询

1. 链接路径错误：导航里的#home这类锚点是相对当前页面路径的，在/city页面点击时，会跳转到/city#home，但该路径下没有对应锚点的内容，而你需要的是跳转到根路径下的/#home。
2. HTML结构错误：city页面把导航栏<nav>放在了<head>标签里，不符合HTML规范——<head>仅能存放元数据、样式、脚本等，不能放置页面内容元素，会导致渲染异常。
3. 布局不统一：city页面未继承main布局，导致和welcome页面结构脱节，导航的上下文不一致。

步骤1：统一页面布局继承 #

修改city.blade.php，让它继承main.blade.php，复用统一布局结构，避免重复编写HTML骨架：

@extends('main')

@section('content')
// 城市页面内容
@endsection

步骤2：修正导航链接的绝对路径 #

把导航里的锚点链接改为绝对路径，使用Laravel的url()辅助函数生成正确路径：

<nav class="navbar">
    <div id="nav-close" class="fas fa-times"></div>
    <a href="{{ url('/#home') }}">home</a>
    <a href="{{ url('/#idea') }}">Idea</a>
    <a href="{{ url('/#about') }}">about</a>
    <a href="{{ url('/#packages') }}">packages</a>
</nav>

如果给根路由设置了名称（比如命名为home），也可以用route()辅助函数：

<a href="{{ route('home') }}#home">home</a>

对应的路由需要补充名称：

Route::get('/', function () {
    return view('welcome');
})->name('home');

步骤3：修正main页面的HTML结构（规范优化） #

原main.blade.php把导航放在<head>和<body>之间，不符合HTML规范，应将导航移到<body>内部：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        @include('partials._head')
    </head>
    <body>
        @include('partials._nav')
        @yield('content')
    </body>
</html>

这样welcome.blade.php的内容就能通过@section('content')填充到正确位置。

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