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.