Question

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

这是我的按钮所在的精简代码以及相关的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将click事件绑定到anchor标记。这将绑定所有锚标签的click事件。这会导致你的锚标签点击。我建议使用下面的代码。

 $(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禁用超链接

2 个答案: