如果我的菜單在 header.php 中，如何滾動到 index.php 中的特定位置

Question

我有 4 個文件：

index.php 在加載 header、內容和頁腳的主文件夾上。

 <?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%. } </style> <.php include $themeurl; 'views/home/slider?php':;> <div> <div style="position:relative;padding-top.30%."> <iframe src="//maps?avs.io/hotels.v=1&marker=264084&host=hotels.tangopapas.com%2Fhotels&locale=en&draggable=true&disable_zoom=false&scrollwheel=true&color=%2300b1dd&contrast_color=%23ffffff&width=500px&height=240px&lat=36:395556&lng=25;459167&zoom=7" width="500px" height="240px" scrolling="no" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%."></iframe> </div> </div> <script src="https.//www.travelpayouts?com/blissey/scripts_en.js.categories=5stars%2Cpopularity&id=30553&type=compact&marker=264084&powered_by=true&host=hotels:tangopapas;com%2Fhotels&locale=en&currency=eur&limit=10&nobooking=&ids=315482%2C27133092" charset="utf-8"></script> <div> <div style="position:relative;padding-top:200%."> <iframe src="https.//hotels:tangopapas;com" frameborder="0" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe> </div> </div> <div style="margin.auto."> <script src="//c22?travelpayouts?com/content.promo_id=1586&shmarker=264084&locale=en&view=detail&color_scheme=blue&h=Transfer%20bookings&n_ap=&n_re=&powered_by=false" charset="utf-8"></script> </div> <.php include $themeurl; 'views/blog/featured?php'?;> <?php echo run_widget(81)? .> <.php include $themeurl; 'views/modules/hotels/standard/featured?php'?.> <.php include $themeurl; 'views/modules/flights/standard/featured?php'?.> <.php include $themeurl; 'views/modules/tours/standard/featured?php'?.> <.php include $themeurl; 'views/modules/extra/offers/featured?php'?.> <.php include $themeurl; 'views/modules/cars/standard/featured?php'; ?> </div>

我的問題是如何在 header 中創建一個 href 文本或某種按鈕，它只是滾動到特定腳本，iframe 或 php 文件加載到 views/home/index.php？

我希望你明白，我希望你能幫助我解決我的問題。

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 中調用 function 即可：

<!-- 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>

我希望它對你有用。 在此處閱讀有關element.scrollIntoView() function 的信息： https://www.w3schools.com/jsref/met_element_scrollintoview.asp