problem with bootstrap : id does not active whether it is displayed?-CodePudding

I am newbie with bootstrap and here is my problem. I code a very simple page with bootstrap 5 and link 4 button "Home" "Explore" "Create" "Share"

Here is my code

https://github.com/nguyencuc2586/project2

In my code, as you can see, I code for example

 <li >
    <a href="#explore-head-section" >Explore</a>
 </li>

And below I coded

<section id="explore-head-section">
    <div >
        <div >
            <div >
                <div >Explore</div>
                <p >Lorem, ipsum.</p>
                <a href="" >Find out more</a>
            </div>
        </div>
    </div>
</section>

So I think when I clicked to the Explore, it must linked to the "Lorem, ipsum..." text ?

But it did not.

By the way, may be because the javascript below ?

Could you please give me some advices for this problem? Thank you in advance.

CodePudding user response：

You need to use the jQuery full version, not slim version.

Please change the code for jQuery import

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>

to as follows:

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

CodePudding user response：

You can use JavaScript to do this job just add listener and 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" >Explore</a>
 <div style="height: 1000px"></div>
 <section id="explore-head-section">
    <div >
        <div >
            <div >
                <div >Explore</div>
                <p >Lorem, ipsum.</p>
                <a href="" >Find out more</a>
            </div>
        </div>
    </div>
</section>
 <div style="height: 1000px"></div>