引导下拉菜单外部链接

Question

我的引导下拉菜单有效，但仅适用于内部链接。 我希望它适用于外部链接

www.speleobox.be/test

这是我的代码：

<!-- BEGIN NAVIGATION -->
<ul class="nav navbar-nav">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Huur uw... <span class="caret"></span></a>
        <ul class="dropdown-menu" role="menu">
            <li><a href="http://www.speleobox.be">Speleobox</a></li>
            <li><a href="http://www.sumopak.be">Sumopakken</a></li>
        </ul>
     </li>
     <li><a href="#experience">Speleobox</a></li>
     <li><a href="#pricing-tables">Prijzen</a></li>
     <li><a href="#contact-us">contact</a></li>
 </ul>
 <!-- END NAVIGATION -->

Answer 1

如我所见，您有一个自定义代码，可以滚动到代码中的某个锚点。因此，即使对于外部链接，这也阻止了默认的点击事件。

//smooth scroll to href value
jQuery(".tabs-btn ul li a, .navbar-nav li a, .navbar-brand").click(function(event){
     event.preventDefault();
     //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     jQuery('html,body').animate({scrollTop:dest}, 1000,'swing');
 });

此外，您可以在开发控制台中看到的代码中存在错误

Cannot read property 'top' of undefined

我建议删除此代码并将其与此代码交换https://css-tricks.com/snippets/jquery/smooth-scrolling/

jQuery(function() {
  jQuery('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^//,'') == this.pathname.replace(/^//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

这个函数效果很好，我已经用了很多次了。