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/

禁用指定ID上的可滚动事件

1 个答案: