Javascript-WordPress：单页滚动JQuery脚本不起作用？

试图创建一个简单的一页滚动.

在wordpress中,我具有这样的导航标签.

<a href="#contact">Contact</a>
<a href="#about">About</a>

这两个链接的对应div是这个.

    <div  id="about-View" class="bg-1-wrapper"> #content </div>
    <div id="contact-View" class="contact-us-section"> #content </div

这是问题(我认为).我的脚本没有选择锚链接ID.

的script.js

    /* ONE PAGE NAVIGATION FUNCTION */
function setBindings() {
    jQuery('a[href^="#"]').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)
    })
}

任何想法,我在这里做错了什么？ This is the website

更新**这是我在查看答案后所做的修订.脚本仍然无法正常工作？

    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('a[href^="#"]').on('click', function(e) {
      e.preventDefault();

      // Get the href attribute, which includes '#' already
      var sectionID = $(this).attr('href') + "-View";

      jQuery("html, body").animate({
        // Find target element
        scrollTop: jQuery(sectionID).offset().top
      }, 1000)
    });
  }

解决方法:

使用正确的ID,例如：

<a href="#contact-View">Contact</a>
for 
<div id="contact-View" class="contact-us-section"> #content </div
AND
<a href="#about-View">About</a>

<div  id="about-View" class="bg-1-wrapper"> #content </div>

 

 jQuery(document).ready(function(){
  jQuery("a").on('click', function(event) {
	if (this.hash !== "") {
    // Prevent default anchor click behavior
      event.preventDefault();
	var hash = this.hash;
	// Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      jQuery('html, body').animate({
        scrollTop: jQuery(hash).offset().top
      }, 1500, function(){
	  
	  // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

   

 <a href="#contact-View">Contact</a>
    <a href="#about-View">About</a>

    <div id="about-View" class="bg-1-wrapper">
      <h2>About</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nisl est, malesuada nec dolor vel, bibendum congue nunc. Aliquam efficitur nulla ac tortor pharetra, id posuere sapien blandit. Fusce ultrices hendrerit diam. Ut quis mi in sapien elementum
        egestas vitae in purus. Donec nec ex a justo laoreet placerat eu ut lectus. Quisque placerat turpis tincidunt odio blandit, sed posuere ipsum imperdiet. Vestibulum porttitor et sapien vitae pretium. .</p>
      <p>Sed scelerisque vulputate ligula, eu blandit enim congue vel. Quisque risus sapien, pellentesque nec est vitae, elementum interdum metus. Fusce sagittis turpis nec tortor lacinia rutrum. Ut soDales blandit tellus a auctor. Vestibulum ante ipsum
        
      </p>
    </div>
    <div id="contact-View" class="contact-us-section">
      <h2>Contact</h2>
      <p>Proin posuere porta magna efficitur tincidunt. Duis tincidunt nulla vel elit sagittis, eu ornare quam vehicula. Sed ut urna a purus imperdiet ultrices. Sed non ipsum vitae nisl dapibus volutpat. In sed interdum mauris. Curabitur ipsum sapien, dapibus
        at purus ut, elementum tempus urna. Nullam dignissim volutpat velit. Duis mi est, eleifend sed ante dolor.</p>
      <p>ondimentum et purus. Nunc convallis elit purus, ut tempus ipsum soDales et. Sed vulputate nec massa non viverra. Mauris tempus efficitur efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi nulla lectus, dictum non sollicitudin
        ac, tincidunt nec eros. Quisque posuere tellus in lacinia pharetra. Aliquam pellentesque, lacus quis finibus finibus, ipsum ante aliquet felis, a euismod diam urna nec tortor. Integer vitae tempor nunc, quis auctor mauris.</p>
    </div>