链接到另一个页面上的锚点

Question

我正在尝试制作一个导航栏，它可以转到我的索引的一部分。当我从索引中使用它时它可以工作，但当我在其他页面上时它不会。

这是我的索引部分的代码：

<section id="mision-vision">
    <!-- Content -->
</section>

还有我的导航栏在其他页面的代码：

<li><a href="index.html#mision-vision">Misión y visión</a></li>

Answer 1

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").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();

      // Store hash
      var hash = this.hash;


      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
            scrollTop: $(hash).offset().top
        }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

看起来是您的 JavaScript 代码导致了问题...而且我看不出您在其他页面（不是索引）上应用 JavaScript 代码的原因...它不会索引。 html，因为您的脚本不允许链接转到 index.html。您的脚本正在同一文档中查找 hashtag，这就是问题所在...

流程 1

您可以删除该脚本...因为您的 联系人 和 Proyectos 页面上没有任何 哈希链接，这应该可以解决它...

流程 2

或者，如果您希望将来在这些页面上添加主题标签链接，那么您可以向该函数添加一些功能，该函数会检查 href 是否同时包含链接和主题标签，然后重定向到该页面使用 window.location.href= LINK TO THE PAGE#HASH...

类似的东西

if ($(this).attr('href').indexOf("#") != -1) {
    YOUR CODE with window.location = $(this).attr('href');
}

这应该使您的代码工作。

Answer 2

我想知道- 是否引起了问题？也许如果您不使用破折号尝试它可能会有所帮助！

Answer 3

您在控制台中收到此错误：

contacto.html:36 Uncaught TypeError: Cannot read property 'top' of undefined

你需要使用另一个条件：

$('html, body').animate({
    scrollTop: $(hash).offset().top
}, 800, function(){

类似：

var href = $(this).attr("href")
if (href.indexOf("index") != -1 ) {
    setTimeout( function() { scroll(0,0); }, 1000)
    setTimeout(function(){
        $('html, body').animate({
           scrollTop: $(hash).offset().top
        }, 800, function() {
           window.location.hash = hash;
        });
    }, 1000);
}

见下面的sn-p

首先，您需要获取点击的a链接的整个href，然后检查它是否包含单词index。如果是这样，不要阻止默认行为。滚动到页面顶部，然后滚动到锚点。如果有帮助，请告诉我。

我无法在此处复制该功能，但请在您的代码上尝试一下。

$("a").on('click', function(event) {
  if (this.hash !== "") { // Make sure this.hash has a value before overriding default behavior
    // Store hash
    var hash = this.hash;
    var href = $(this).attr("href")

    if (href.indexOf("jsfiddle") != -1) {
      setTimeout(function() {
        scroll(0, 0);
      }, 1000)

      setTimeout(function() {
        $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 1000, 'swing');
        return false;
      }, 800);

    }
    else {

      // Prevent default anchor click behavior
      event.preventDefault();


      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  }
});

div {
    height: 500px;
    width: 100%;
    background: red;
    border-top: 10px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class="nav navbar-nav navbar-right">
    <li><a href="index.html#mision-vision">Misión y visión</a></li>
    <li><a href="index.html#valores">Valores</a></li>
    <li><a href="#section1">Proyectos</a></li>

    <li><a href="#section2" class="contact-us">Contacto</a></li>
    <li><a href="#section3" class="donate">Apóyanos</a></li>
</ul>

<div id ="section1">
</div>

<div id ="section2">
</div>

<div id ="section3">
</div>