如果我的菜单在 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>

我希望它对你有用。