WordPress：单页滚动JQuery脚本不工作？ [英] WordPress: One-page scroll JQuery script not working?

问题描述

在WordPress中，我有一个像这样的标签导航。

 < a href =＃contact>联络人< / a> 
< a href =＃about>关于< / a> 
  

这两个链接的对应div都是这个。

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

这是问题（我认为）。我的脚本没有选择锚链接ID。

Script.js

  / *一页导航功能* / 
函数setBindings（）{
 jQuery（'a [href ^ =＃]'）。click（function（e）{ 
 //防止定位标记工作（？）
 e.preventDefault（）; 
 var sectionID = e.currentTarget.id +-View; 
 
 animate（{
 scrollTop：jQuery（＃+ sectionID）.offset（）。top 
}，1000）
}）
 } 
  

任何想法，我在这里做错了什么？ 这是网站

UPDATE **这是我在查看答案后所做的修改。脚本仍然不起作用！！

  jQuery（document）.ready（function（）{
 
 / /为每个< a>标记添加点击监听器
 setBindings（）; 
 
 // burger nav 
 jQuery（。burger-nav）。on（click ，function（）{
 jQuery（。header-nav）。toggleClass（open）; 
}）; 
 
}）; 
 $ b $ *一页导航功能* / 
函数setBindings（）{
 jQuery（'a [href ^ =＃]'）。on（'click'，函数（e）{
 e.preventDefault（）; 
 
 //获取包含'＃'的href属性
 var sectionID = $（this）.attr（ 'href'）+-View; 
 
 jQuery（html，body）。animate（{
 //查找目标元素
 scrollTop：jQuery（sectionID）。 offset（）。top 
}，1000）
}）; 
} 
  

解决方案

 < a href =＃contact-View>联络人< / a> 
为
< div id =contact-Viewclass =contact-us-section> #content< / div 
 AND 
< a href =＃about-View>关于< / a> 
 
< div id =about-Viewclass =bg-1-wrapper> #content< / div> 
  

jQuery （document）.ready（function（）{jQuery（a）。on（'click'，function（event）{if（this.hash！==）{//阻止默认定位点击行为event.preventDefault （）; var hash = this.hash; //使用jQuery的animate（）方法添加平滑页面滚动//可选数字（800）指定滚动到指定区域所需的毫秒数jQuery（'html，body '）.animate（{scrollTop：jQuery（hash）.offset（）。top}，1500，function（）{//在完成滚动时添加哈希（＃）到URL（默认点击行为）window.location.hash = hash ;}）;}}）;}）;

< ; script src =https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js >< /脚本> < a href =＃contact-View>联络人< / a> < a href =＃about-View>关于< / a> < div id =about-Viewclass =bg-1-wrapper> < H2>关于< / 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。在purus中使用sapien elementum egestas简历。完成后即可使用。 Quisque placerat turpis tincidunt odio blandit，sed posuere ipsum imperdiet。 Vestibulum porttitor et sapien vitae pretium。 < / p为H. < p> sed scelerisque vulputate ligula，eu blandit enim congue vel。 Quisque risus sapien，其中包含元素interdum metus。 Fusce sagittis turpis nec tortor lacinia rutrum。苏格兰人淡淡的说道： Vestibulum ante ipsum< / p> < / DIV> < div id =contact-Viewclass =contact-us-section> < H2>联系与LT; / H2> < p> Proin posuere porta magna efficititur tincidunt。 Duis tincidunt nulla vel elit sagittis，eu ornare quam vehicula。 Sed up urna a purus imperdiet ultrices。 sed non ipsum vitae nisl dapibus volutpat。在sed interdum mauris。 Curabitur ipsum sapien，在purus ut的dapibus，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效率有效。 Orci varius natoque penatibus et magnis dis parturient montes，nascetur ridiculus mus。 Morbi nulla lectus，不适用，不适用，不适用。在lacinia pharetra quisque posuere tellus。 Aliquam pellentesque，lacus quis finibus finibus，ipsum ante aliquet felis，euismod diam urna nec tortor。 Integer vitae tempor nunc，quis auctor mauris。< / p> < / div>

Trying to create a simple one page scroll.

In WordPress, I have navigation a tags like this.

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

The Corresponding divs for both links are this.

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

This is the problem (I think). My script isn't selecting the anchor links 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)
    })
}

Any ideas, what am I doing wrong here? This is the website

UPDATE **Here is the amendments I've made after looking at the answers. Script still not work?!

    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)
    });
  }

解决方案

Use the proper id like :

<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>

这篇关于WordPress：单页滚动JQuery脚本不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！