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

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

#1

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>


#2

Your console should show an error for the above line. Where have you defined element?

What are you expecting to happen when you click on the element with id=“work”?


#3

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.


#4

You did not answer my first question.


#5

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


#6

added in this line… still not seems working:

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

#7

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?

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


#8

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…


#9

I am going to tell you what is wrong. Your click event is on the wrong element. You don’t want to click the Work section to have the Work section scroll into view. Instead, you want to click the anchor element which has an href attribute referring to the Work section. Your jQuery selector needs to target the anchor element instead of the section element.


#10

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 …


#11

I just gave you the straight answer. I just checked your code and it appears to be working as you want. When I click the Work link at the top it takes me to the Work section on your page. What is the issue you see?


#12

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.


#13

So to accomplish you have correctly targeted the anchor tags with a click event. The issue is, you want to prevent the default behavior of clicking an anchor. The default behavior is to jump immediately to the target specified in the href attribute. Read about preventDefault to stop this from occurring. Next, you need to target the section you want to scroll smoothly to. What you want is the value of the href attribute of the anchor which was clicked. Your smooth_scrolling function needs a parameter (event) to capture the click event object. To reference which anchor was clicked, you would refer to event.target. Now, you need to get the value of the href attribute of the event.target element. See if you can find a jQuery method which helps you do this. Once you do that you need to use a jQuery selector which targets this href (which will be a string which looks like #work, #about_me, or #form_section and use the applicable scrollIntoView properties for the smooth transition.


#14

I will give you the general layout of the solution:

$("a").click(function (event) {
  // need prevent the default action of the click event here
  const href = ??? // ??? will be a string of the href attribute for clicked anchor element
  $(href)[0].scrollIntoView({
    behavior: "smooth"
  });
});