我如何在 bootstrap 中使用平滑滚动并在导航栏中的页面外仍然有一个 link

Question

我使用 w3School 的教程制作了一个简单的公司单页网站： http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

一切正常，直到我尝试在导航栏的页面外添加 link：`

<!-- NAVBAR -->
    <nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <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 navbar-right">
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#services">SERVICES</a></li>
        <li><a href="#portfolio">PORTFOLIO</a></li>
        <li><a href="#contact">CONTACT</a></li>
        <li><a href="http://www.twitter.com/mytwitter">@mytwitter</a></li>
      </ul>
    </div>
  </div>
</nav>`

推特 link 无法打开，但如果我删除平滑滚动脚本则可以使用：

<script>
$(document).ready(function(){
  // Add smooth scrolling to all links in navbar + footer link
  $(".navbar a, footer a[href='#myPage']").on('click', function(event) {

  // 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 (900) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 900, function(){

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

有办法解决这个问题吗？

Answer 1

尝试将特定的 class 应用于 "smooth scrolling" 元素

    <li><a class="scroll" href="#about">ABOUT</a></li>

你的页脚也一样link

然后

$(".scroll").on('click', function(event) {

我如何在 bootstrap 中使用平滑滚动并在导航栏中的页面外仍然有一个 link

How can i use smooth scrolling in bootstrap an still have a link outside my page in the navbar

jquery

css

twitter-bootstrap

smooth-scrolling