<a>标记没有链接到其他页面

Question

我创建了一个页面布局和多个部分，并为这些部分添加了导航栏的链接，并且我有一个jQuery用于使页面平滑滚动。但是如果我想链接到其他页面，它根本不起作用，当我删除Jquery时，它工作得很好。

$(function(){ 
    $('.CHOSEN_CLASS').on('click', function(event){ 
     event.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
    }); 
}); 

Answer 1

会更好所有链接元素，而不仅仅是同一页面中的链接。改变你的选择，使其仅捕获与片段链接：

... 
$(document).on('click', 'a[href*="#"]', function(event){ 
... 

Answer 2

您点击事件绑定到：如果你添加任何类<a>包含#LINK然后皮条客你喜欢这个JS

$(function(){ 
 
    $(document).on('click', 'a', function(event){ 
 
     event.preventDefault(); 
 
    
 
     $('html, body').animate({ 
 
      scrollTop: $($.attr(this, 'href')).offset().top 
 
     }, 500); 
 
    }); 
 
});

<nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
     </div> 
 
     <div class="collapse navbar-collapse" id="myNavbar"> 
 
      <ul class="nav navbar-nav"> 
 
      <li><a href="#hero">Home</a></li> 
 
      <li><a href="service.html">Services</a></li> 
 
      <li><a href="#contact-form">Contact</a></li> 
 
      <li><a href="#about-us">About Us</a></li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </nav> 
 

 
<!-- begin snippet: js hide: false console: true babel: false -->

Answer 3

这将阻止正常工作的链接：

event.preventDefault(); 

我建议你把一个类上是锚链接并更新你的jQuery来定位这些类。 不包括链接类，你要链接到其他页面

<ul class="nav navbar-nav"> 
    <li><a href="#hero" class="anchor-link">Home</a></li> 
    <li><a href="service.html">Services</a></li> 
    <li><a href="#contact-form" class="anchor-link">Contact</a></li> 
    <li><a href="#about-us" class="anchor-link">About Us</a></li> 
    </ul> 


$(function(){ 
    $(document).on('click', '.anchor-link', function(event){ 
     event.preventDefault(); 

     $('html, body').animate({ 
      scrollTop: $($.attr(this, 'href')).offset().top 
     }, 500); 
    }); 
});