WordPress：單頁滾動JQuery腳本不工作？

Question

試圖創建一個簡單的一個頁面滾動。

在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

UPDATE **這是我在查看答案後所做的修正。腳本仍然不起作用？！

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

Answer 1

按我的意見，也有你的代碼，有幾個語法錯誤，其中的函數調用不正確關閉：

• function(e)有一個額外的尾隨)
• 您沒有關閉jQuery .on()方法正確。您使用}而不是})。當您檢查您的瀏覽器

這些錯誤應該是很明顯的控制檯，這就是爲什麼它是非常必要的，你建立在你的問題中最小的，具體的和可覈查的例子，因爲你已經通過固定的語法解決您的問題，一半代碼錯誤。

除此之外，e.currentTarget.id沒有引用目標元素的ID。 e.currentTarget只是指"the current DOM element within the event bubbling phase"，它仍然是<a>元素。由於它沒有ID，它將返回一個空字符串，並且您的選擇器最終將爲-View ...並且jQuery('-view')與頁面上的任何內容都不匹配，因此不會發生滾動。

你可以做的只是簡單地從錨點元素的href屬性讀取，附加-View並簡單地將它傳遞給jQuery選擇器，即：

var sectionID = $(this).attr('href') + "-View"; 

見下驗證的概念例如：

jQuery(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) 
 
    }); 
 
    } 
 
    setBindings(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a href="#contact">Contact</a> 
 
<a href="#about">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. Cras id nisl enim. Class aptent taciti sociosqu 
 
    ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean in nulla porttitor, tincidunt nulla id, vestibulum enim. Etiam ante justo, congue eu diam consequat, fringilla tempus orci.</p> 
 
    <p>Duis magna ipsum, venenatis et massa eget, dignissim imperdiet felis. Quisque vel ultrices purus. Cras ante nulla, auctor quis purus et, finibus congue massa. Fusce eleifend tristique ipsum non tempor. Vivamus eget leo dignissim, efficitur urna a, dignissim 
 
    metus. 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 
 
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean placerat massa nisl, semper varius neque vehicula a. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. 
 
    </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 ac, malesuada lacinia sem. Quisque facilisis elit ultricies, scelerisque orci in, tempor purus. Nam dapibus eros at risus tincidunt laoreet. Donec 
 
    facilisis sed erat interdum aliquet. Integer feugiat lorem id odio eleifend, eget eleifend sapien dapibus. Sed posuere mi vitae metus malesuada mollis. Mauris ac felis fringilla, euismod tellus sed, dictum nunc. In vel gravida dolor.</p> 
 
    <p>Curabitur laoreet facilisis massa ac tristique. Suspendisse tortor nisl, faucibus non nunc eu, feugiat dictum ligula. Donec ipsum ipsum, volutpat a maximus nec, sagittis quis ipsum. Praesent arcu lectus, rhoncus quis lacinia a, condimentum 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>

Answer 2

使用正確的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) { 
 
\t if (this.hash !== "") { 
 
    // Prevent default anchor click behavior 
 
     event.preventDefault(); 
 
\t var hash = this.hash; 
 
\t // 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(){ 
 
\t 
 
\t // 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>

Answer 3

您可以在下面使用的頁面滾動

$(document).ready(function() { 

    jQuery('a[href^="#"]').on('click', function(e) { 
    e.preventDefault(); 

    var sectionID = $(this).attr('href') + "-View"; 

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