Search code examples
javascripttwitter-bootstrap-3smooth-scrolling

Smooth Scroll javascript disables hyperlinks

I have a button that when clicked smooth scrolls to an anchor point on the same page. The problem is the script has disabled all hyperlinks on the page. How can I fix this so my extenal hyperlinks work again and the demo button smooth scrolls down the page?

This is the stripped down code where my button resides and the associated javascript:

<body data-spy="scroll" data-offset="80">
<div class="other">
<div class="container">
<div class="col-md-12">
<div class="center-header"><a href="#demo"><button type="submit" class="btn btn-theme-bg btn-lg">Demo</button></a></div>
</div>
</div>
</div>
<div id="demo" div class="center-header"></div>
<script>
    $(document).on('click', 'a', function(event){
    event.preventDefault();

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

</body>
Solution

  • HTML: 

    <a href="#demo" class="someClassName">

    JS:

    $(document).on('click', '.someClassName', function(event){