Smooth Scroll javascript 禁用超链接

Question

我有一个按钮，单击该按钮可平滑滚动到同一页面上的锚点。问题是脚本禁用了页面上的所有超链接。我该如何解决这个问题，以便我的外部超链接再次工作并且演示按钮可以顺畅地向下滚动页面？

这是我的按钮所在的精简代码以及关联的 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>

Answer 1

HTML:

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

JS:

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

Answer 2

观察您的代码后，我发现您正在使用 jQuery 将点击事件绑定到锚标记。这将绑定所有锚标记的点击事件。它导致您的锚标签无法点击。我建议使用下面的代码。

 $(document).on('click', 'a', function(event){
  if ($.attr(this, 'href').indexOf("#") === 0) {   
     event.preventDefault();
     $('html, body').animate({
       scrollTop: $( $.attr(this, 'href') ).offset().top
     }, 500);
  }
});

Smooth Scroll javascript 禁用超链接

Smooth Scroll javascript disables hyperlinks

javascript

twitter-bootstrap-3

smooth-scrolling