title: How can i use smooth scrolling in bootstrap an still have a link outside my page in the navbar
body: <p>I have made a simple company one-page website, using a tutorial from w3School:
  <a href="http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp" rel="nofollow">http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp</a></p>
  
  <p>Everything works fine, until I try to add a link outside the page in my navbar:`   </p>
  
  <pre><code>&lt;!-- NAVBAR --&gt;
      &lt;nav class="navbar navbar-default navbar-fixed-top"&gt;
    &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
        &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;span class="icon-bar"&gt;&lt;/span&gt; 
        &lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="collapse navbar-collapse" id="myNavbar"&gt;
        &lt;ul class="nav navbar-nav navbar-right"&gt;
          &lt;li&gt;&lt;a href="#about"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#services"&gt;SERVICES&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#portfolio"&gt;PORTFOLIO&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#contact"&gt;CONTACT&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.twitter.com/mytwitter"&gt;@mytwitter&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;`
  </code></pre>
  
  <p>The twitter link won't open, but works if i remove the smooth scrolling script:</p>
  
  <pre><code>&lt;script&gt;
  $(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;
      });
    });
  })
  &lt;/script&gt;
  </code></pre>
  
  <p>Is there a way to fix this?</p>