Question

我试图制作一个导航栏，指向我索引的某个部分。当我从索引中使用它时它可以工作，但是当我在其他页面上时它不会。这是我的索引部分的代码：

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

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

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

提前致谢并抱歉我的英语。

Answer 1

我想知道-是否会导致问题？也许如果你在没有破折号的情况下尝试它可能会有所帮助！

Answer 2

you get this error in console : 

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);
}

请参阅下面的代码段

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

无法复制此处的功能，但请尝试使用您的代码。

＆＃13;

$("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
  }
});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

$(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的原因（而不是索引）...它不会 index.html 因为您的脚本没有让链接转到 index.html ，您的脚本正在同一文档中查找主题标签，并且＆＃ 39;问题是......

流程1
您可以删除该脚本...因为联系人和 Proyectos 页面上没有哈希链接，而且应该修复它... < / p>

流程2
或者，如果您希望将来在该页面上有主题标签链接，那么您可以向该功能添加一些功能，检查 href 是否包含链接和主题标签，然后使用<重定向到该页面strong> window.location.href = 链接到页面#HASH ...

像这样

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

这应该使您的代码正常工作

链接到另一页面上的锚点

3 个答案: