Bootsrap nav-link does not navigate to the assigned ID in HTML after using canvas tag

Question

When I used canvas element the Bootstrap nav-link did not navigate to the assigned ID. But when I replaced canvas with div, the nav-link was working but the graph did not load.

Here is the link to my website: https://covidupdate.netlify.com/

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <nav class="navbar navbar-light bg-light">
                <span class="navbar-brand mb-0 h1">COVID-19: India Stats</span>
            </nav>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse flex-grow-1 text-right" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto flex-nowrap">
                    <li class="nav-item active">
                        <a class="nav-link" href="#summary-total">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#table-state-data">State-wise Stats</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#trends">Spread Trends</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#helpline">Helpline</a>
                    </li>
                    <li class="nav-item active">
                        <a class="nav-link" href="#helpful-links">Helpful Links</a>
                    </li>
                </ul>
            </div>
        </nav>

<div id="trends" class="w-90-95">
            <h3 class="text-center padding">Spread Trends</h3>
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="cumulative-tab" data-toggle="tab" href="#cumulative" role="tab"
                        aria-controls="cumulative" aria-selected="true">Cumulative</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="daily-tab" data-toggle="tab" href="#daily" role="tab" aria-controls="daily"
                        aria-selected="false">Daily</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="cumulative" role="tabpanel" aria-labelledby="cumulative-tab">
                    <canvas class="padding canvasred" id="confirmedCasesCumulative"></canvas>
                    <canvas class="padding canvasgreen" id="recoveredCumulative"></canvas>
                    <canvas class="padding canvasgrey" id="deathsCumulative"></canvas>
                </div>
                <div class="tab-pane fade" id="daily" role="tabpanel" aria-labelledby="daily-tab">
                    <canvas class="padding canvasred" id="confirmedIncreaseDaily"></canvas>
                    <canvas class="padding canvasgreen" id="recoveredDaily"></canvas>
                    <canvas class="padding canvasgrey" id="deathsDaily"></canvas>
                </div>
            </div>
        </div>

  [1]: https://covidupdate.netlify.com/

Answer 1

You can use jQuerys.animate(), .offset() and scrollTop. Add after adding the jquery script.

<script>
 $(document).ready(function(){
  $( ".navbar-nav .nav-link" ).click(function( event ) {
     event.preventDefault();
     $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top }, 500);
  });
 });
</script>

Also replace https://code.jquery.com/jquery-3.4.1.slim.min.js slim version with full version https://code.jquery.com/jquery-3.4.1.min.js