如何移动到索引中的特定位置.php如果我的菜单在标题.php中

Question

我有 4 个文件：

索引.php在加载页眉、内容和页脚的主文件夹上。

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

在标题中.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 文件的主内容文件。 此索引.php文件的位置位于主文件夹的子文件夹视图/主页/，并包含以下内容：

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

我的问题是如何在标题中创建 href 文本或某种按钮，这些按钮只是滚动到在 views/home/index.php 中加载的特定脚本、iframe 或 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 中简单地调用一个函数来做到这一点：

<!-- 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()函数的信息：https://www.w3schools.com/jsref/met_element_scrollintoview.asp