html - 为网站上的锚链接提供平滑滚动，但现在无法访问外部链接

问题描述

我的网站上有一个有趣的问题。

我将为您提供该网站的 URL，然后如果您按照以下说明操作，您可以看到我的问题。

https://www.metis-online.com

指示：

加载网站
在导航栏菜单上，选择任何链接，您可以看到它执行平滑滚动。可以选择该导航栏菜单中的任何链接，并且它在滚动到页面上的相关部分时按预期工作。
我们现在要访问外部链接，因此请执行以下操作：从导航栏菜单中选择“课程”，然后选择“订购我们的在线课程和考试包”。您应该被带到作为外部页面的相关页面。
现在在该页面上，选择任何导航栏链接，您可以看到没有任何反应，并且控制台显示一个错误，指出它找不到#top。

这就是我面临的问题。我希望平滑滚动工作，但这样做会破坏主页外部页面上的导航栏链接。

我希望导航栏链接能够正常工作，以便如果用户在任何外部页面上并选择任何导航栏链接，它将把用户带到主页上网站的正确锚点。

下面是执行平滑滚动的代码：

头.php：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <script>
        $(document).ready(function(){
  // Add smooth scrolling to all links
  $('a[href^="/../#"]').on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

    </script>

头文件.php

<!-----NavigationBar---->

<section id="top">
</section>

<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
 
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

home.php（这是主页，包含平滑滚动到的锚链接，我包括一个按钮，可以将用户带到外部页面，就像说明一样）：

<html>

<head>

 <?php include "./head.php" ?>
</head>

<body>

 <?php include "./header.php" ?>

    <!-------About------->
    <section id="about">
    ...
    </section>
    <!-------Courses------->
    <section id="courses">
    ...
    <a href="courses/course-BRFAITC009">
    <button type="button">Order online course and exam bundle</button>
    </a>
    ...
    </section>
    <!-------Services------->
    <section id="services">
    ...
    </section>
    <!-------Testimonials------->
    <section id="testimonials">
    ...
    </section>
    <!-------Contacts------->
    <section id="contacts">
    ...
    </section>

...

</body>
</html>

目录->课程/课程-BRFAITC009.php

<html>

<head>

 <?php include "./head.php" ?>
</head>

<body>

 <?php include "./header.php" ?>

...

</body>
</html>

标签： htmljquery

html - 为网站上的锚链接提供平滑滚动，但现在无法访问外部链接

问题描述

解决方案

推荐阅读