Getting The Animated Scrolling Effect Working(Bootstrap 4 and jQuery)

Hi guys im still working on my portfolio page, and its taking rather long.
My understanding of Jquery and Bootstrap is quite limited, but i’m determined to get this done.
I really cant wrap my head around properly getting the Js and Jquery code snippets for the scrolling effect to work
I honestly dont understand how to target the nav items. Granted that i don’t understand a lot about these snippets. Since they work elsewhere, then what exactly is my mistake. please help
@JohnBackUp @sorinr @csorrentino
my project is at https://codepen.io/stealthman22/pen/PeZvNK
once i get this done , the rest will just be a little touch here, and a little touch there
Cheers

To make a long story short the best way to understand it is by looking at this example

2 Likes

(click on the buttons at top)

1 Like

You’re close. It may help to step back for a second because it can be hard to learn this stuff if you’re trying to also wrap your head around the JS.

You can do the majority of this, except the animated scroll, without JS. The two important parts to remember here are:

  • The container or element you want the link to go TO should have an id. For example the container for the about section would have id=“about”.
  • The link that you click would have an href including a # + the id that you want to link to. In the example it would be href="#about".

I believe that if you fix your html to include that, any of your snippets will work to animate that.

1 Like

thank you so much Chris, i would do exactly what you’ve outlined above, and give you an update
cheers

Thanks boss. really simplified and easy to follow. You are amazing. thanks for your help
would let you know once i get this working

You are very welcome and happy coding.

1 Like

Hey Sorin . I actually copied your js code for scrolling, but mine only jumps, no nice smooth scrolling. Also it jumps a little below the start point of each section. any ideas @John-freeCodeCamp @csorrentino
cheers

Your problem its not in js code i have showed you as an example but in the html part. As you saw in my example the anchor href must pair with the corresponding section id. For the about section its working like a charm but for the others ofc it will not work if you declare:

<a class="nav-link" style="color:#CCCCFF" data-value="PORTFOLIO & ACHIEVEMENTS" href="#Portfolio & Achievements">PORTFOLIO & ACHIEVEMENTS<span class="sr-only"</span></a> 

and the section looks like:

<div class="div-container3" id="Portfolio & Achievements">

You need to make them like href="#portfolio" <div id="portfolio"> and so on.

1 Like

Hi guys been working on the scrolling effect. Finally got it working but, the portfolio section just doesn’t seem to be correct. I really don’t know what is happening there. I feel there is still an issue between the id and href attribute targeting this section.
Please just check it out. Will appreciate any contribution.
Meanwhile and taking a step back to tackle other parts of the page, probably building the social buttons. I really wanna be done with this and move on to the Java-script tutorials. Cheers
@sorinr @csorrentino @John-freeCodeCamp

You have two places that have an ID of “portfolio”. The line item with the portfolio link also has an ID of “portfolio”. It’s probably left over from when you were setting it up the first time. Just remove that and it will work.

<li class="nav-item" id="portfolio"> <!-- delete this id-->
       <a class="nav-link" style="color:#CCCCFF" data-value="portfolio" href="#portfolio">PORTFOLIO<span class="sr-only"</span></a>       
</li>

Thank you so much. It worked but I’m still trying to isolate my mistake so i don’t make it again
I’m only seeing one occurrence still
Cheers

The other occurence is the one you want on line 82.

<div id="portfolio" class="div-container3">
 <h1>PORTFOLIO</h1>

yeah i got it my bad.
Thank you
tho i deleted the ones in the nav bar and it worked .
I thought the id must be refrenced twice.:slightly_smiling_face: