Question

是的，我现在已经有一段时间了。一页滚动适用于主页（定义了div ID）。

问题：从博客页面开始，如果用户点击了“联系人”，我希望将其重定向到主页，然后动画滚动到#contact-View div。

尝试：我已尝试检查用户是否点击a代码，然后检查现在是否有使用if statement的博客页面，然后将其重定向回主页（和div）使用
window.location.href = home +sectionID;

无效。

header.php（只有导航位..）

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

front-page.php（主页）

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

Javascript

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

});


function redirectToHome() {

}

/* ONE PAGE NAVIGATION FUNCTION */
  function setBindings() {
    jQuery('a[href^="#"]').on('click', function(e) {
      e.preventDefault();

       var home = "http://localhost/wordpress/";


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


      // if you're on blog page, first redirect to home -> div: #contact-View
      if(document.URL.indexOf("http://localhost/wordpress/blog") >= 0){ 
            window.location.href = home +sectionID;
               console.log(location.href);


       }

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

任何想法如何解决问题？

Answer 1

更新window.location.href的价值时会发生两件事：

如果新值位于当前页面（通过使用锚点），它将跳转到该点而不重新加载页面
如果新值未位于当前页面，则JavaScript执行将停止，并且将请求并加载新页面

在这种情况下，animate函数未执行的问题是后者。

解决方案是请求额外不存在的锚点附加的新页面（例如，＃contact-View-scroll ）。在新页面上，您可以使用JavaScript在URL中检查此特定锚点值，并在必要时执行滚动功能。

希望这有助于理解和解决您的问题。

更新：在

下面添加了一些示例代码

第1步：在博客页面上，通过在格式标签前添加以下内容来更新引用主页的链接：#scroll:（http://localhost/wordpress/home#contact-View成为http://localhost/wordpress/home#scroll:contact-View}

第2步：将以下代码段添加到主页。这将搜索#scroll:标记并激活animate函数（如果存在）。

jQuery(document).ready(function() {
    // Get the hash from the URL
    var hash = window.location.hash;
    // If a hash exists && starts with "#scroll:"
    if (hash.length and hash.indexOf('#scroll:') === 0) {
    // Get the anchor name we are scrolling to
    var selectionID = hash.substr('#scroll:'.length);
    // Call the jQuery scroll function
    jQuery("html, body").animate({
      scrollTop: jQuery('#'+selectionID).offset().top
    }, 1000);
  }
});

第3步：享受！

另外，请参阅https://jsfiddle.net/qcarmk2w了解演示。

单页滚动：尝试重定向到主页并滚动到div - 不工作？

1 个答案: