WordPress：试图创建一页滚动导航？

Question

好的，我正在尝试创建一个简单的导航。然而，当我将我的html / css转换为wordpress网站时，我无法使用它，因为我必须使用<?php wp_nav_menu( $args) ?>

这是我的html

<nav class="header-nav">
            <!-- Create a navigation called primary in the header (front-end) -->

            <?php $args = array('theme_location' => 'primary'); ?>
            <?php wp_nav_menu( $args) ?>
</nav>

问题：在我的html / css模型网站中，我只是给每个a项目一个id并使用javascript添加绑定-View取决于哪个a项目是点击。这是脚本。

的js

    jQuery(document).ready(function() {

    // add a click listener to each <a> tags
    setBindings();

    // burger nav
    jQuery(".burger-nav").on("click", function() {
        jQuery(".header-nav").toggleClass("open");  
    });

});

/* ONE PAGE NAVIGATION FUNCTION */
function setBindings() {
    jQuery(".header-nav a.scrollLink").click(function(e) {
        // prevent anchor tags for working (?)
        e.preventDefault();
        var sectionID = e.currentTarget.id + "-View";

        jQuery("html, body").animate({
            scrollTop: jQuery("#" + sectionID).offset().top
        }, 1000)
    })
}

Wordpress：在我的wordpress中，我创建了菜单，在链接部分我创建了一个带有div id的菜单，但为了让动画工作，我需要javascript才能工作。这是一个截图：

问题：如何向导航a标记添加ID由于Wordpress在使用wp_nav_menu( $args)时呈现自己的html导航？

想法？

更新这就是我想在WordPress中复制的内容（这是我的html导航版本，带有a标签的ID，使我的脚本滚动动画）

        <ul class="header-nav">
            <li><a id="home" class="scrollLink" href="#home-View">Home</a></li>
            <li><a id="about" class="scrollLink" href="#about-View">About</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a id="contact"  class="scrollLink" href="#contact-View">Contact</a></li>
        </ul>