$('#id').click does not work?

I want to add a scrolling animation on the link in nav bar, I think the syntax I was using was wrong when it comes to the javascript part.

Could someone help me fix it?

     <ul>
        <li><a href="#about_me" class="hvr-shadow navbar_a">About Me</a></li>
        <li><a href="#work" class="hvr-shadow navbar_a">Work</a></li>
        <li><a href="#form_section" class="hvr-shadow navbar_a">Contact</a></li>
      </ul>

<!--some other code-->

<script type="text/javascript">
//scrolling effect
$('#work').click(
  function smooth_scrolling() {
  element.scrollIntoView({
    behaviour: "smooth"
  });
}
);
</script>

right now if you click on the button the page will jump straight into that part,
what i wanna do is to add a sliding animation.

lol… I didn’t declare it…
I am looking up info on MDN now.

added in this line… still not seems working:

var element = document.getElementById("work");

I think what you are missing is that your current code will attempt to have the div with id=“work” scroll into view when you click on the div with id=“work”. Is that really what you want to do?

yes.

If the div with id=“work” is already in view, why would you need to click on it to get it into view?

hmm. I dont know. I just want to add in some more visual effect to make it seems more professional…

okay I rarely ask for a straight answer but you gotta let me have this one…
I am going to learn how to manipulate the dom next …

ahhh. I think I did not explain myself clearly.
I want a slow mo scrolling effect like these: https://codepen.io/zhouxiang19910319/pen/bxPvge
instead of straight jump into the section.