How to organize navigation through anchors through the wordpress menu?

Question

User navigation

Hello! I will try to explain in understandable language.
There was such a problem here -> there is a menu on the site all links refer to anchors the site is made as a one-page site, that is, when creating a menu in wordpress, an arbitrary link of the form (#home, #about, etc.) was selected, but there is one link (Portfolio) which leads to another page. So the problem is that if you go to the Portfolio, you get site/portfolio , and when you go back to the Main page, you get site/porfolio/#home and it should be site/#home, the answer I see is only one link to make not just #home but the full site/ #home-> well, everything rolls around the site from the second page (Portfolio) goes to the main one, But this question is not over; with such a link, the active class is not assigned, which leads to the fact that the Home link is always on, it should not beautifully correspond to the section where the window is located.
fuuuu ... seems to have clearly explained, in general, the question is how to implement it

here is the menu code

<nav class="navbar navbar-default" role="navigation">
                  <div class="container-fluid">

                    <!-- Toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse scrollspy smooth-scroll" id="navbar-collapse-1">
                                            <?php wp_nav_menu('menu=first&menu_class=nav navbar-nav navbar-right'); ?>

                      <!--<ul class="nav navbar-nav navbar-right">
                        <li class="active"><a href="#banner">Главная</a></li>
                        <li><a href="#about">Услуги</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#clients">Clients</a></li>
                        <li><a href="#contact">Contact</a></li>
                      </ul>-->
                    </div>

                  </div>
                </nav>

there is also javascript that implements smooth movement around the site, etc.

//Scroll Spy
    //-----------------------------------------------
    if($(".scrollspy").length>0) {
      $("body").addClass("scroll-spy");
      $('body').scrollspy({ 
        target: '.scrollspy',
        offset: 152
      });
    }

    //Smooth Scroll
    //-----------------------------------------------
    if ($(".smooth-scroll").length>0) {
      $('.smooth-scroll a[href*=#]:not([href=#]), a[href*=#]:not([href=#]).smooth-scroll').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
          var target = $(this.hash);
          target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
          if (target.length) {
            $('html,body').animate({
              scrollTop: target.offset().top-151
            }, 1000);
            return false;
          }
        }
      });
    }