平滑滚动javascript禁用超链接

Smooth Scroll javascript disables hyperlinks

本文关键字：超链接 javascript 滚动 平滑      更新时间：2023-09-26

我有一个按钮，当点击平滑滚动到同一页面上的锚点。问题是脚本禁用了页面上的所有超链接。我如何解决这个问题，使我的外部超链接再次工作，演示按钮顺利滚动页面?

这是我的按钮所在的代码和相关的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>

HTML: 

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

JS: 

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

观察你的代码后，我看到你正在使用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);
  }
});
相关文章：