时间戳

首页 > 解决方案 > 如何在wordpress的页面模板上使用页面滚动到id插件？

wordpress - 如何在wordpress的页面模板上使用页面滚动到id插件？

问题描述

我有通过在 wordpress 中使用多个小模板页面创建的主页。我在上面设置了菜单。现在我想使用菜单继续特定部分/模板。就像我按下联系人菜单按钮一样，它应该会顺利向下移动到调用联系人模板的主页。我正在使用 wordpress 的“页面滚动到 id”插件，但它不起作用。当页面由仪表板页面创建时，我还看到这个插件工作。请帮助我，我如何使用这个插件导航到我的模板页面/部分。如果还有其他插件，请告诉我。我也会尝试使用它。

谢谢

标签： wordpress

解决方案

要在链接上创建平滑滚动，请单击以下步骤：

第 1 步：在菜单 href 中添加部分 ID，包括来自 admin section 的 #section1 Appearance >> Menu。

第 2 步：创建 id 名称为 section1 的部分或 div。

<div id="section1"></div>

第 3 步：将以下代码粘贴到您的自定义 js 文件下。

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

我希望它会帮助你。

推荐阅读