将数据页属性添加到Wordpress菜单

Question

我想做的是当我单击菜单项时，网站应该向下滚动到我在该菜单项的“数据页”属性中传递的那部分。下面是示例。

$("a").click(function(){
  var pageId = $(this).attr("data-page");
  $("html, body").animate({ scrollTop: $("#"+pageId).offset().top }, 1000);
});

div.page {
  min-height:1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="navbar">
  <nav class="navbar navbar-dark bg-inverse navbar-fixed-top">
       <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">company name</a>
    </div>
    <ul class="nav navbar-nav navbar-right ">
      <li><a href="#" style="color:blue;" data-page="about">About</a></li>
      <li><a href="#" style="color:blue;" data-page="portfolio">Portfolio</a></li>
      <li><a class="portfolio-scroll" href="#" style="color:blue;" id="contact-nav" data-page="contact">Contact</a></li>
    </ul>
</div>
    
    <div class="page" id="about"><h1>About</h1></div>
    <div class="page" id="portfolio"><h1>Portfolio</h1></div>
    <div class="page" id="contact"><h1>Contact</h1></div>
</nav>

但是，在wordpress中，我很难将data-page属性添加到wordpress菜单列表中。 --Wordpress菜单集成

<?php
 function theme_setup()
 {

     //featured image add
     add_theme_support('post-thumbnails');

     //register navigation menus
     register_nav_menus(
       array(
           'primary' => __('Primary Menu'),
           'overlay' => __('Overlay Menu')
       ));
 }
 add_action('after_setup_theme','theme_setup');

-导航菜单

<div class="navigation">
        <?php
    // Check if there's a menu assigned to the 'primary' location.

        if ( ! has_nav_menu( 'primary' ) ) {
            return;
        }
        ?>
        <?php wp_nav_menu(
            array(
                'theme_location'  => 'primary',
                'start_depth' => 1,
                'fallback_cb'     => ''
            )
        );
        ?>
    </div>

这是菜单结构：

任何人都可以帮助我。我在网上搜索，发现了一些有关Walker班级的知识。但是我听不懂。