0

I have 4 files :

index.php on main folder that loads header, content and footer.

<?php
  include('header.php');
  echo $this->content();
  include('footer.php');
?>

in header.php on main folder too, i have this :

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

and the main content file that loads multiple scripts, iframes or even load other php files. the location of this index.php file is located at subfolder views/home/ of the main folder and has this inside :

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

My question is how can I create a href text or some kind of buttons in the header that just scrolls to the specific script, iframe or php file loaded in views/home/index.php?

I hope that you understood, and I hope that you can help me solve my problem.

terrymorse
  • 6,771
  • 1
  • 21
  • 27
Thanasis Valto Kourpetis
  • 97
  • 1
  • 14

2 Answers2

1

It doesn't matter that your links and content are in different PHP files because you link to URLs and you can still link them together using anchors as long as you can assign them common IDs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Linking_to_an_element_on_the_same_page

You can also use CSS property scroll-behavior: smooth; for a better looking scroll effect (or do the same using JavaScript)

Láďa Durchánek
  • 1,199
  • 8
  • 16
0

You can do this by simply calling a function in your 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>

I hope it works for you like this. Read about element.scrollIntoView() function here: https://www.w3schools.com/jsref/met_element_scrollintoview.asp

schnibor
  • 23
  • 3