Question

我有一个header.php，它出现在我博客的每一页上，其导航栏看起来像这样：

<nav>
  <ul>
    <li><a href="<?php echo get_permalink(4); ?>">Logistics</a></li>
    <li><a href="<?php echo get_permalink(5); ?>#contact">Contact</a></li>      
  </ul>
</nav>

但是当我点击链接到#contact的锚标签时，它位于id为5的页面中，正如你可以通过php代码看到的那样，没有任何反应。我尝试使用斜杠（/ #contact）但我仍然保持相同的行为。这不是链接到另一个页面上特定ID的正确方法吗？

编辑：我也有一些平滑的滚动代码（下面），我认为这可能与我的问题有关。

<script>
  $( document ).ready( function () {

     // Add smooth scrolling to all links
     $( "a" ).on( 'click', function ( event ) {

         // Make sure this.hash has a value before overriding default behavior
         if ( this.hash !== "" ) {

             // Prevent default anchor click behavior
             event.preventDefault();

             // Store hash
             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
             $( 'html, body' ).animate( {
                scrollTop: $( hash ).offset().top
             }, 800, function () {

                  // Add hash (#) to URL when done scrolling (default click behavior)
                  window.location.hash = hash;
              } );
         } // End if
       } );
      } );
</script>

谢谢！

Answer 1

使用

<?php echo get_page_link(5)."#contact"; ?>

而不是获得永久链接功能

Answer 2

您有一个javascript错误。

<script>
            $( document ).ready( function () {
                // Add smooth scrolling to all links
                $( "a" ).on( 'click', function ( event ) {

                    // Make sure this.hash has a value before overriding default behavior
                    if ( this.hash !== "" ) {
                        // Prevent default anchor click behavior
                        event.preventDefault();

                        // Store hash
                        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
                        $( 'html, body' ).animate( {
                            scrollTop: $( hash ).offset().top
                        }, 800, function () {

                            // Add hash (#) to URL when done scrolling (default click behavior)
                            window.location.hash = hash;
                        } );
                    } // End if
                } );
            } );
        </script>

这是问题所在。在主页上，您有一个id为#contato的div。在其他页面上它不存在。

$( 'html, body' ).animate( {
                                scrollTop: $( hash ).offset().top
                            }, 800, function () {

                                // Add hash (#) to URL when done scrolling (default click behavior)
                                window.location.hash = hash;
                            } );

你的hash var的值是“#contato”，但是当js试图获得它的偏移量时，你会收到一条错误，说你无法读取'undefined'的属性顶部。因此，您可以尝试从其他页面中删除该部分脚本，并将其保留在主页上。这应该像魅力一样。如果您有任何疑问，请询问。

LE ：我建议使用此方法进行平滑滚动（我没有根据您的情况对其进行测试，但它始终适用于我）

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

链接到另一个Wordpress页面上的特定ID？

2 个答案: