如果我的菜单在 header.php 中，如何滚动到 index.php 中的特定位置

Question

我有 4 个文件：

加载页眉、内容和页脚的主文件夹中的 index.php。

<?php

  include('header.php');

  echo $this->content();

  include('footer.php');

?>

在主文件夹的 header.php 中，我也有这个：

<div class="header-nav">

  <div class="container">

    <div class="navbar-wrapper">

      <div class="navbar navbar-expand-lg">

        <div id="mobileMenuMain" class="collapse navbar-collapse o2 fe">

          <nav class="main-nav-menu main-menu-nav navbar-arrow">

            <ul class="main-nav">

              <li>

                <a href="<?php echo base_url(); ?>" title="home">

                  <?=lang('01')?>

                </a>

              </li>

              <?=menu(1);?>

          </nav>

          <!--/.nav-collapse -->

        </div>

        <?php if( ! empty($phone) ) { ?>

        <div class="navbar-phone d-none d-lg-block o1">

          <i class="material-icons">phone</i>

          <?php echo trans('0438');?> :

          <?php echo $phone; ?>

        </div>

        <?php } ?>

      </div>

    </div>

  </div>

</div>

以及加载多个脚本、iframe 甚至加载其他 php 文件的主要内容文件。这个 index.php 文件的位置位于主文件夹的子文件夹 views/home/ 里面：

<style>

  .home_hidden {

    display: none !important

  }

  

  .form-search-main-01 .col-md-6,

  .form-search-main-01 .col-md-5,

  .form-search-main-01 .col-md-4,

  .form-search-main-01 .col-md-3,

  .form-search-main-01 .col-md-2 {

    width: 100% !important;

    flex: 0 0 100%;

    max-width: 100%;

  }

Answer 1

您的链接和内容位于不同的 PHP 文件中并不重要，因为您链接到 URL，并且您仍然可以使用锚点将它们链接在一起，只要您可以为它们分配通用 ID：https: //developer.mozilla.org/en -US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page您还可以使用 CSS 属性scroll-behavior: smooth;以获得更好看的滚动效果（或使用 JavaScript执行相同操作）

Answer 2

您只需在 JavaScript 中调用一个函数即可：<!-- JavaScript part: --><script type="text/javascript">   function scrollTo(id){      var element = document.getElementById(id)      // For scrolling to the top of the container:      element.scrollIntoView(True)      // Alternatively, for scrolling to the bottom of the container:      element.scrollIntoView(False)   }</script><!-- Your container you want to scroll to: --><div id="container1">   <!-- Content of container here --></div><!-- Link for scrolling to the container, can also be included with include from php like you do it in your navbar: --><a href="javascript: scrollTo('container1')">   Go to container1</a>我希望它对你有用。