jquery - In a WordPress theme external links on nav don't work if Bootstrap scrollspy class is applied

Question

First of all sorry for my english. I'm working on a Wordpress theme that uses Bootstrap for layout. When I use a link whithin the same page in a bootstrap navbar (class navbar-op) it works perfectly and with a smooth scroll but when the link points to an external template it doesn't work. Not using the class "navbar-op" fix the problem but then the smooth scrolling stops working. I'm using the jquery.min.js?ver=3.5.1 and bootstrap-3.3.7.min.js.

Basically I need the jQuery function also work with external links, that is, instead of hash it uses the entire url address in that case.

This is de nav.php code:

  
        <nav class="navbar navbar-pasific navbar-mp megamenu navbar-fixed-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand page-scroll" href="mp-index-parallax-2.html#page-top">
                        <img src="<?php echo bloginfo('template_directory');?>/assets/img/logo/logo-default.png" alt="logo">
                        <span class="textlogo">ARQUITRABE</span>
                    </a>
                </div>
        
                <div class="navbar-collapse collapse navbar-main-collapse">
                    <ul class="nav navbar-nav">
                        <li class="dropdown megamenu-fw">
                            <a href="<?php echo get_option('Home');?>#page-top"  class="dropdown-toggle color-light">Home </a>
                        </li>
                        
                        <li class="dropdown megamenu-fw"> 
                            <a href="<?php echo get_option('Home');?>#service"  class="dropdown-toggle color-light">Services </a>
                        </li>
                        
                        <li class="dropdown">
                            <a href="<?php echo get_option('Home');?>#team"  class="dropdown-toggle color-light">About us  </a>
                        </li>
                    
                        <li class="dropdown">
                            <a href="<?php echo get_page_link(get_page_by_title('Projects')->ID);?>"  class="dropdown-toggle color-light">Projects </a>
                        </li>
                    
                        <li class="dropdown">
                            <a href="<?php echo get_page_link( get_page_by_title('Blog')->ID );?>"  class="dropdown-toggle color-light">Blog </a>
                        </li>
                        
                        <li class="dropdown">
                            <a href="<?php echo get_page_link( get_page_by_title('Archives')->ID );?>"  class="color-light">Archives </a>
                        </li>
                        
                         <li class="dropdown">
                            <a href="<?php echo get_page_link( get_page_by_title('Contact')->ID );?>"  class="dropdown-toggle color-light">Contact </a>
                        </li>
                           <li><a href="op-index-parallax-4.html#" data-toggle="modal" data-target="#loginModal"><i class="fa fa-lock fa-fw"></i>Login</a></li>
                        <li>
                            <a href="mp-index-parallax-2.html#" data-toggle="modal" data-target="#searchModal"><i class="fa fa-search fa-fw color-pasific"></i></a>
                        </li>
                        
                    </ul>
                
                </div>
            </div>
        </nav> 
 
     

question from:https://stackoverflow.com/questions/65644379/in-a-wordpress-theme-external-links-on-nav-dont-work-if-bootstrap-scrollspy-cla

Answer 1

Well I fixed it, although I do not know if it is the most orthodox way.

jQuery(function(){
        "use strict";
        jQuery(".navbar-op ul li a, .navbar-op a.navbar-brand, .intro-direction a, a.go-to-top").on('click', function(event) {    
            event.preventDefault();
            var hash = this.hash;
            if (hash == '') {
                var url = this.getAttribute('href');
                window.location.href = url;
            }
            
            jQuery('html, body').animate({
                scrollTop: jQuery(hash).offset().top
            }, 900, function(){
                window.location.hash = hash;
            });
        });
    });