javascript - 禁用指定 id 上的可滚动事件

Question

我的网站上有响应式导航。而且，此 js 代码用于在我的网页中平滑滚动。

$(function(){$("a[href*=#]:not([href=#])").click(function() {
if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")
&&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$("[name="+this.hash.slice(1)+"]");
if(target.length){
$("html,body").animate({scrollTop:target.offset().top},1000);return false}}})});

当我创建链接时 <a href="#topWrapper">Scroll to Topwrapper</a> ，我可以顺利地将它滚动到 div只要 div 名称是 #topWrapper或 #whatever .我还有一个 ID 名称 navi在我的导航中。我想问一下，无论如何我可以禁用这个 js 代码中的 id，这样当我点击汉堡包图标打开菜单时它不会滚动吗？谢谢!

希望您能理解我的问题，因为英语不是我的主要语言。谢谢!

更新:

<nav class="menu" id="navi">
  <ul>
    <li class="has-sub-menu"><a href="/">About</a>
      <ul class="sub-menu">
        <li><a href="#">Our Vision</a></li>
    <li><a href="#">Our Services</a></li>
    <li><a href="#">Latest New</a></li>
    <li><a href="#">Our Blog</a></li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="/">Gallery</a>
      <ul class="sub-menu">
        <li class="has-sub-menu"><a href="#">Kitchen Cabinet</a>
          <ul class="sub-menu">
            <li><a href="#">Melamine ABS Kitchen Cabinet</a></li>
            <li><a href="#">Acrylic Door Kitchen Cabinet</a></li>
            <li><a href="#">3G Glass Door Kitchen Cabinet</a></li>
            <li><a href="#">4G Glass Door Kitchen Cabinet</a></li>
          </ul>
        </li>
        <li class="has-sub-menu"><a href="#">Wardrobe Design</a>
          <ul class="sub-menu">
            <li><a href="#">Swing Door Wardrobe</a></li>
            <li><a href="#">Sliding Door Wardrobe</a></li>
            <li><a href="#">Walk In Closet</a></li>
          </ul>
        </li>
        <li><a href="#">TV Cabinet</a></li>
        <li><a href="#">Study Table Design</a></li>
        <li><a href="#">3D Cabinet Design</a></li>
    <li><a href="#">Others Cabinet Design</a></li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="#">Materials</a>
      <ul class="sub-menu">
        <li class="has-sub-menu"><a href="#">Doors</a>
          <ul>
        <li><a href="#">Melamine ABS Door</a></li>
        <li><a href="#">3G Glass Door</a></li>
        <li><a href="#">Acrylic Door</a></li>
        <li><a href="#">4G Glass Door</a></li>
        <li><a href="#">Membrane Pressed</a></li>
        <li><a href="#">Multi-Layer Ply Laminated</a></li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="#">Carcass</a>
      <ul>
        <li><a href="#">Compressed Wood</a></li>
        <li><a href="#">Blockboard</a></li>
        <li><a href="#">Solid Wood</a></li>
        <li><a href="#">Aluminium</a></li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="#">Worktop</a>
      <ul>
        <li><a href="#">HPL Worktop</a></li>
        <li><a href="#">Solid Surface</a></li>
        <li><a href="#">Granite Stone</a></li>
        <li><a href="#">Quartz Stone</a></li>
      </ul>
    </li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="#">Promotion</a>
      <ul class="sub-menu">
    <li><a href="#">Kitchen Cabinet</a></li>
    <li><a href="#">Wardrobe</a></li>
    <li><a href="#">Appliances</a></li>
    <li><a href="#">Extended Promotion</a></li>
      </ul>
    </li>
    <li class="has-sub-menu"><a href="#">Contact</a>
      <ul class="sub-menu">
        <li><a href="#">Contact Information</a></li>
    <li><a href="#">Enquiry Form</a></li>
    <li><a href="#">Meet Our Designers</a></li>
        <li><a href="#">Facebook</a></li>
        <li><a href="#">Twitter</a></li>
        <li class="share"><a href="#">Whatsapp</a></li>
      </ul>
    </li>
  </ul>
</nav>

导航的Js代码:

 $(document).ready(function(e){
var t=$("#navi"),a=$(".menu-link"),l=$(".has-sub-menu > a");
a.click(function(e){e.preventDefault(),a.toggleClass("active"),t.toggleClass("active")}),l.click(function(e){e.preventDefault();
var t=$(this);t.toggleClass("active").next("ul").toggleClass("active")}),e.preventDefault()});

Answer 1

做:

document.getElementById("desired-id-name").addEventListener('click', function(){
  return false;  // does nothing
});

---

编辑 1:由于您使用的是 jQuery，这里是一个 jQuery 版本:

$("#desired-id-name").click(function(){
  return false;
});

确保在里面添加:

$(function(){ ... };

---

编辑 2:

$("#desired-id-name").scroll(function(){
  return false;
});

文档:https://api.jquery.com/scroll/