ハンバーガーメニューでページ内リンクを設定

前提・実現したいこと

ハンバーガーメニューのページ内リンクをクリックしたらメニューを閉じてアンカーで指定箇所まで飛ばしたいです。
今はアンカーリンクをクリックしてもclickが反応しません。

該当のソースコード

             <div class="smp_nav">
                    <nav>
                        <ul class="gNav">
                            <li><a href="#ABC">メニュー1</a></li>
                            <li><a href="/">メニュー2</a></li>
                            <li><a href="/">メニュー3</a></li>
                        </ul>
                    </nav>
                </div><!-- /.smp_nav-->
            <a class="toggle" href="#">
            <span></span>
            <span></span>
            <span></span>
            </a>
     </div><!-- /#header -->

<section="ABC">
</section>

メニュー1を押したときに<section="ABC">の位置まで飛ばしたいです。

// スマホメニュー
$(function() {
　$('.toggle').click(function() {
　　$(this).toggleClass('active');
        $(this).toggleClass("open");
        $(".smp_nav").toggleClass("openNav");
        $('.smp_nav li').hide();
     　  $('.smp_nav li').hide();
        $('.smp_nav li').each(function(i) {
          $(this).delay(50 * i).fadeIn(500);
      });
　if ($(this).hasClass('active')) {
　　$('.smp_nav').addClass('active');　 //クラスを付与
　} else {
　　$('.smp_nav').removeClass('active'); //クラスを外す
　}
　});
});

    .toggle {
        display: block;
        position: fixed;
        right: 10px;
        top: 0;
        width: 40px;
        height: 40px;
        cursor: pointer;
        z-index: 2;
    }     
    .toggle span {
        display: block;
        position: absolute;
        width: 40px;
        border-bottom: solid 6px #000000;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;
    }
    .toggle span:nth-child(1) {
        top: 9px;
    }
    .toggle span:nth-child(2) {
        top: 22px;
    }
    .toggle span:nth-child(3) {
        top: 36px;
    }
    .toggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .toggle.active span:nth-child(2),
    .toggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    .onanimation{
        display: block;
    }
    .smp_nav {
        position: fixed;
        right:0;
        top:13vw;
        width:100%;
        z-index:0;
        opacity: 0;
        display: none;
        background: #F9F8F3;
        height: 100%;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }
    .smp_nav.openNav{
        display: block;
        animation-name:navshow;
        animation-duration:0.75s;
        opacity: 1;
        border-top: 1px solid #000000;
        text-align:left;
    }

当初はメニューはすべて外部リンクだったのですが、急遽ページ内のアンカーリンクに変わってしまい、すぐに対応できずにいます。
似たような質問を見たり調べたりしましたがうまくいきません。
ご教授いただないでしょうか。