从外部站点返回 index.php/about答案

【问题标题】：Go back to index.php/about from extern site从外部站点返回 index.php/about
【发布时间】：2020-03-25 01:02:13
【问题描述】：

我有一个单页站点，其中包含 3 个其他站点 href="other.html" 您可以在导航栏中看到它。在导航栏的下拉列表中，您可以看到有“外部”站点。当我在那个“外部”站点之一上并且我想回到“index.php#about”时，我该怎么做。所以问题是，当“extern”网站上的用户点击 about 时，它会跳转到 index.php#about 而不仅仅是 index.php

谢谢

       <nav class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar" id="navspy">
  <a class="navbar-brand" href="#page-top" data-scroll>AR PhotoArt</a>
  <button class="navbar-toggler first-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
    aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <div class="animated-icon1"><span></span><span></span><span></span></div>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav ml-auto smooth-scroll">
      <li class="nav-item">
        <a class="nav-link" href="#about" data-scroll>LebensArt</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#studio" data-scroll>ArbeitsArt</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#portfolio" data-scroll>LichtArt</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-scroll-ignore>
          Mehr
        </a>
        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="other1.html">Anleitung</a>
          <a class="dropdown-item" href="other2.html">Wettbewerb</a>
          <a class="dropdown-item" href="other3.html">Kurs</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#kontakt" data-scroll>Kontakt</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

【问题讨论】：

标签： php html css bootstrap-4

【解决方案1】：

我假设您在谈论浏览器中的后退、前进和刷新功能。

我在 jQuery 中包含了一种可能的解决方案（不确定您是否使用 jQuery）

另外，从下面的 SO 答案中获取了 javascript 解决方案......

https://stackoverflow.com/a/27046922/791600

更新

所以你说的 jQuery 代码需要偏移 49，这就是你想要做的：

$(window).on('hashchange', function () 
{
    var top = $(window.location.hash).offset().top;
    top += 49;
    $(window).scrollTop(top);
});

jQuery

$(window).on('hashchange', function () 
{
    var top = $(window.location.hash).offset().top;
    $(window).scrollTop(top);
});

Javascript

document.addEventListener("DOMContentLoaded", function() {
  var links = document.getElementsByTagName("A");
  for(var i=0; i < links.length; i++) {
    if(!links[i].hash) continue;
    if(links[i].origin + links[i].pathname != self.location.href) continue;
    (function(anchorPoint) {
      links[i].addEventListener("click", function(e) {
        anchorPoint.scrollIntoView(true);
        e.preventDefault();
      }, false);
    })(document.getElementById(links[i].hash.replace(/#/, "")));
  }
}, false);

【讨论】：

这很有效：我放了一个偏移量（49），但偏移量不起作用......
如果需要调整偏移量，只需在计算完位置后调整“top”的值即可。（所以top += 49 或top -= 49）
@UdisKlorenz 如果此答案对您有用，请单击左侧的复选标记接受我的答案。谢谢 :) stackoverflow.com/help/someone-answers
我尝试了你所说的偏移量，但它不起作用......其他想法？
@UdisKlorenz 所以你让它工作，但它是 49 像素关闭还是什么？您可以发布您尝试在您的问题中使用的代码吗？

【解决方案2】：

在文件名前的 url 中添加斜杠 /index.php。

<a class="nav-link" href="/index.php#about" data-scroll>LebensArt</a>

这个链接编辑是这样的

<a class="dropdown-item" href="/other1.html">Anleitung</a>
<a class="dropdown-item" href="/other2.html">Wettbewerb</a>
<a class="dropdown-item" href="/other3.html">Kurs</a>

【讨论】：