JQuery smooth scroll integration

Bootstrap Studio Help
1

I wanted to add a smooth scroll effect to my site. I didn't want to use scroll-behavior: smooth. So I thought I'd use the following as a starting point, sourced from w3c.

Under the "Design" panel on the right side of Bootstrap Studio, and under its JavaScript section, I created "smoothscroll.js" and put the following code into it. Now, how and where would I integrate/call this into the rest of the site so my navbar links scroll smoothly?

`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script></p>

<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$(“a”).on(‘click’, function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
  // Prevent default anchor click behavior
  event.preventDefault();

  // Store hash
  var hash = this.hash;

  // Using jQuery's animate() method to add smooth page scroll
  // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 800, function(){

    // Add hash (#) to URL when done scrolling (default click behavior)
    window.location.hash = hash;
  });
} // End if

});
});
</script>

<p>`

2

As you can see from my live site, it is not working.

I'm not new to websites, but I am to bootstrap, and to bootstrap studio. I couldn't figure out how within BSS to edit code directly, so I exported my site and did a couple things externally:

It's supposed to be a one-page site, so each navbar link is supposed to scroll smoothly down to the appropriate section. The one and only other page on the site is the privacy policy, linked from the bottom.

It's not working. The navbar links jump like they normally do. What am I doing wrong, and what specifically do I need to change in my code to make this work?
3

Friendly bump. Anyone? Anyone? Bueller? Bueller? Bueller?

4

W3Schools put that code in the <Head> section, whereas you've put it in a .js file

Not really sure, but when you add it in a .js file, you don't need the <script> tags do you?

You can move the <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> to the <head> section

Then remove the opening and closing <script> tags from the remaining code in the .js file

5

Wendy, that was great help, thank you. It was not enough to put it into the header. I moved the jquery script src into the header, and the code from w3c. Still didn't work. But when I used "id" in my

<

section> tags, instead of it worked fine. So it's working now.

6

Glad you sorted it out :-)

7

Also, the jquery.min.js file doesn't need to be referenced manually as it's automatically included already. Check your Assets folder and you'll be able to see which files are already included and be able to go from there.

And removing the script tags you definitely needed to do but they when you do that you need to replace them with the link tag setup, if it's something being linked to that is which this was. Either way though you don't need to include that, it's already added for you. You would however, need to add a link to a custom js file. :)