Issue with bootstrap: the ID is not activating even when it is visible

I am a beginner with bootstrap and I encountered an issue. I created a simple page using bootstrap 5 and included 4 buttons: "Home," "Explore," "Create," and "Share."

Here is the code for reference:

https://github.com/nguyencuc2586/project2

In the code snippet provided below, you can see that I have coded an example like this:

 <li class="nav-item">
    <a href="#explore-head-section" class="nav-link">Explore</a>
 </li>

Furthermore, after coding the above snippet, I proceeded to create the section below:

<section id="explore-head-section">
    <div class="container">
        <div class="row">
            <div class="col text-center py-5">
                <div class="display-4">Explore</div>
                <p class="lead">Lorem, ipsum.</p>
                <a href="" class="btn btn-outline-secondary">Find out more</a>
            </div>
        </div>
    </div>
</section>

So, my expectation was that when I clicked on the Explore button, it should link me to the "Lorem, ipsum..." text.

Unfortunately, it did not work as expected.

I suspect it may be due to the JavaScript part. Can someone provide guidance or advice on how to fix this issue? Thank you in advance.

Answer №1

Make sure to always choose the full jQuery version, not the slim one.

Update your jQuery import code like so:

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="117b606474636851223f243f20">[email protected]</a>/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

Replace it with the following code:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Answer №2

To achieve this task, you can utilize JavaScript by adding an event listener for the window scroll

document.querySelector('.nav-link').addEventListener("click", function(e){
    var el = e.currentTarget.getAttribute("href");
    const y = el.top + window.scrollY;
    window.scroll({
        top: y,
        behavior: 'smooth'
    });
});
<a href="#explore-head-section" class="nav-link">Explore</a>
 <div style="height: 1000px"></div>
 <section id="explore-head-section">
    <div class="container">
        <div class="row">
            <div class="col text-center py-5">
                <div class="display-4">Explore</div>
                <p class="lead">Lorem, ipsum.</p>
                <a href="" class="btn btn-outline-secondary">Find out more</a>
            </div>
        </div>
    </div>
</section>
 <div style="height: 1000px"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using JavaScript to automate keystrokes programmatically

Is there a way to programmatically close a webpage using the keyboard shortcut control + W? I'm wondering if I can write code that will mimic this specific shortcut (control+W). ...

Adjust camera focus towards object and utilize the lookAt() method (React three fiber)

Seeking a smooth transition for camera.position and camera.lookAt as I switch between "zoomed out" and "zoomed in" views of individual objects randomly placed. The positioning aspect is working smoothly, but lerping the lookAt() function seems to be causi ...

Converting a Jquery object into a Javascript object

Can someone help me decipher this piece of code? //... obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); //... $(function() { var dd = new DropDown( $('#dd') ); $(doc ...

"Implementing AngularJS bidirectional data binding to dynamically link user inputs with corresponding fields

Having trouble automatically outputting data with angularJS. One of the great features of angular is two-way data binding, but I can't seem to bind input with a JSON file. What I want to achieve is if the user's input matches a key, the correspon ...

Having Trouble with the Background Video Scaling on My HTML Bootstrap Page for Mobile Devices

I have been working on an HTML background video page, and everything seems to be working perfectly on desktop. However, when it comes to mobile, the video does not cover the full screen. Only half of the video is visible on the mobile screen. Here is the ...

Avoiding the use of numbers in v-if in Vue.js

My website features a left menu that displays different content based on the selected menu's ID. However, I currently have === 0 and === 1 in the v-if statement, and I'm looking for a way to avoid manually inputting these numbers. <template& ...

Would it be a security risk to share the Stripe charge ID and connected account ID with clients on the frontend?

I am currently making an ajax call to my backend and I am unsure whether it is secure to reveal the charge id and the connected account id on the client side. Just to clarify, there are no secret keys or sensitive information stored in the browser. Your ...

Vue automatically clears the INPUT field when disabling it

Have you ever noticed why Vue resets a text input field when it's set to disabled? This behavior is not observed with plain Javascript and also doesn't affect textarea fields. var app = new Vue({ el: '.container', data: { disab ...

Retrieve the child element that is being clicked

Alright, I'm facing a little issue here (it seems simple, but I just can't seem to crack it)... Let me paint the picture with a snippet of HTML code below: <!-- New Website #1 --> <!DOCTYPE html> <html style='min-height:0px; ...

"I am sending a JSON object to a PHP script and extracting the

I have created a form with PHP like this: <?php include '../db/baza.php'; ?> <?php include 'vrh.php' ?> <div id="page"> <div id="pageFrame"> <form action="up ...

Using values from a designated line within the textarea to successfully submit a GET form

How can I extract values from a specific line in a TextArea and use them to submit a form? <!DOCTYPE html> <html> <body> <input type='button' value='submit' onclick='document.getElementById("submit-line-3") . ...

Is there a way to divide a string and insert something into the new array that is created?

I am facing an issue with adding a new fruit to a string that is converted into an array. Here's the scenario: var fruits = "banana,apple"; In an attempt to add a new fruit to this list, I tried converting it to an array and then using the push meth ...

Remove files from the server using an AJAX request

I am attempting to delete files on the SERVER using JavaScript, and I have already consulted the advice provided in this JavaScript file deletion thread My current JavaScript code looks like this: deleteFile = function() { return $.ajax({ url: "de ...

Having trouble displaying results in Vue.js after making an API request?

I am facing challenges in displaying the results using vue.js. The data from my API (ASP.NET CORE) is being retrieved successfully, as shown in my vue dev tools on Google Chrome. However, I am encountering difficulties in rendering the results on the brows ...

I'm currently working on incorporating an edit feature into the create form by utilizing server actions in the latest version of Next.js, version 14

The issue arises when the create form's type (id) parameter is null, which does not align with prisma's (edit info). export function AboutForm({ id }: { id: number }) { const router = useRouter(); const [err, setErr] = useState("&qu ...

Is there a way I can link a variable to a URL for an image?

Creating v-chip objects with dynamic variable names and images is causing an issue. The image source string depends on the name provided, but when I bind the name to the source string, the image fails to load. Despite trying solutions from a similar questi ...

Exploring Clara.io's json data for 3D geometry within the Three.js

I've encountered an issue with exporting models in Clara.io. According to their instructions, exporting a selection should create a file for JSONLoader and exporting the full scene should result in a file for ObjectLoader. However, none of the export ...

Using jQuery to incorporate a variable into JSON schema markup

For my current project, I am attempting to extract the meta description and incorporate it into JSON schema markup. However, I am facing difficulty in passing the variable properly into the JSON structure. My initial approach was as follows: <script&g ...

How can you personalize the background color of a Material-UI tooltip?

Is there a way to customize the hover tooltip with a "? icon" for users providing input guidance in a text field? I prefer the design to have white background with grey text and larger font size, as opposed to MUI's default style which is grey with wh ...

JavaScript can be used to append multiple array values within double brackets in Spring MVC

I am currently developing an application using Spring MVC with MongoDB. In the collection, I have retrieved multiple image name values: Ex: 1.jpg, 2.jpg, 3.jpg.... My Query: Now I need to place these values inside double brackets [[]] Ex : [["1.jpg"," ...