JS scroll script conflict with Bootstrap?

Question

JavaScript

Good day.
I'm building a website with Bootstrap. When adding a carousel, there is a conflict with the script for scrolling through the page.
When you click on the slider link, it jumps to the anchor of the block.
Scroll script:

/**
 * scroll-menu
 */
!function ($) {

    var menu_selector = ".scroll-menu";

    function onScroll(){
        var scroll_top = $(document).scrollTop();
        $(menu_selector + " a").each(function(){
            var hash = $(this).attr("href");
            var target = $(hash);
            if (target.position().top <= scroll_top && target.position().top + target.outerHeight() > scroll_top) {
                $(menu_selector + " a.active").removeClass("active");
                $(this).addClass("active");
            } else {
                $(this).removeClass("active");
            }
        });
    }

    $(document).ready(function () {
        $(document).on("scroll", onScroll);
        $("a[href^=#]").click(function(e){
            e.preventDefault();
            $(document).off("scroll");
            $(menu_selector + " a.active").removeClass("active");
            $(this).addClass("active");
            var hash = $(this).attr("href");
            var target = $(hash);
            $("html, body").animate({scrollTop: target.offset().top}, 500, function(){
                window.location.hash = hash;
                $(document).on("scroll", onScroll);
            });
        });
    });

}(window.jQuery);

Bootstrap Carousel Link Script:

<div class="carousel-control">
    <a class="carousel-control-prev" href="#carousel-example-generic" role="button" data-slide="prev">Previous</a>
    <a class="carousel-control-next" href="#carousel-example-generic" role="button" data-slide="next">Next</a>
  </div>

Please tell me how to solve the problem, thanks!

Answer 1

As an option (yes, it's not ideal), you can put a symbol after #, like - $("a[href^=#i]").click(function(e){
id's can be called like id="iclass"