Question

我的带有bootstraps的下拉菜单，但只有内部链接。我希望它与外部链接一起使用

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

我看到你有一个自定义代码，可以滚动到代码中的某个锚点。因此，即使对于外部链接，这也可以防止默认的onclick事件。

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

这个功能效果很好，我已经使用了很多次。

bootstrap下拉菜单外部链接

1 个答案: