CODEWITHSUNDEEP
javascript
Jornes
Jornes

Reputation: 287

Disable scrollable event on a specified id

I have a responsive navigation on my website. And, this js code is for smooth scrolling within my webpage.

$(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}}})});

When i create a link <a href="#topWrapper">Scroll to Topwrapper</a>, i can scroll it smoothly to the div as long as the div name is #topWrapper or #whatever. I have also an id name navi in my navigation. I would like to ask that, is there anyway i can disable the id in this js code so that it doesn't scroll when i click on the hamburger icon to open the menu? Thank you!

Hope you understand what i am asking as English is not my primary language. Thank you!

Update:

<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 Code for navigation:

 $(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()});

Upvotes: 3

Views: 60

Answers (1)

Rahul Desai
Rahul Desai

Reputation: 15501

Do:

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

EDIT 1: Since you are using jQuery, here is a jQuery version:

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

Make sure to add this inside:

$(function(){ ... };

EDIT 2:

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

Docs: https://api.jquery.com/scroll/

Upvotes: 1

Related Questions