将 Link 锚定到同一站点上的另一个页面

Question

我在网站上看了很多遍，但找不到问题所在。我需要 link 从图库页面到索引页面，但到该页面中的特定锚点。

我的索引headers

<!-- Container (About Section) -->
<div id="about" class="container-fluid">
</div>

<!-- Container (Services Section) -->
<div id="portfolio" class="container-fluid text-center">
</div>

然后是图库页面上的 link。

<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="/index.html">ABOUT</a></li>
<li><a href="/gallery.html">GALLERY</a></li>
<li><a href="/index.html#portfolio">PORTFOLIO</a></li>
<li><a href="store/index.php">STORE</a></li>
<li><a href="/index.html#ordering">ORDERING</a></li>
<li><a href="/index.html#contact">CONTACT</a></li>

Answer 1

尝试使用反斜杠，或复制完整路径。不知道如何使用#。

Answer 2

查看您的站点，您已向 navbar 添加了一些侦听器，以便在您单击导航栏上的锚点到所选部分时进行滚动转换。这段代码。

$(document).ready(function(){
// Add smooth scrolling to all links in navbar + footer link
    $(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
        // Prevent default anchor click behavior
        event.preventDefault();
        ....

在那里，您可以避免标准浏览器行为点击哈希值不同于 "" 的锚点，因此当您点击您的图库页面进入您的主页时，它可以避免重定向到您的主页。您应该修改此代码以检查目标页面是否与当前页面相同，或者您是否需要转到其他页面。

Answer 3

由于您的 javascript，您无法在您的页面中导航。就目前而言，当您从另一个页面单击锚点 link 时，它会尝试获取不存在项目的偏移量。您可以将脚本更改为类似这样的内容以防止出现这种情况

$(".navbar a, footer a[href='#myPage']").on('click', function(event) {
    var hash = this.hash;
    if (hash == '' || $(hash).length == 0) return true;

    event.preventDefault();
    $('html, body').animate({
        scrollTop: $(hash).offset().top
    }, 900, function(){
        window.location.hash = hash;
    });
});

将 Link 锚定到同一站点上的另一个页面

Anchor Link to another page on same site

html

javascript

anchor

jquery