ID的超链接-HTML

将自定义链接添加为, <a href="www.mywebsite.com#contact">

在自定义jquery中添加

//jQuery for Page Scroll - Single page      
$('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
                }, 500);
                return false;
            }
    }
});



// jQuery for Page Navigation
$( window ).load(function() {

            if(window.location.hash) {
                var url=window.location.href;
                var hash = url.substring(url.indexOf('#')+1);
                $('html, body').stop().animate({
                    scrollTop: $("#"+hash).offset().top
                }, 1000);   
            }  
});

解决方案#1-可互换菜单项

添加x2菜单项:

1. 选择屏幕右上角的“屏幕选项”
2. 选择“ CSS类 “在 显示高级菜单属性
3. 添加x2个自定义链接(“ 自定义链接 方框”),例如:
   #contact
/#contact
4. 添加菜单项后,单击它以将其展开,添加一个 标签下方输入字段中的自定义类“ CSS类 (可选) “,例如:
   anchor-link 对于菜单项 #联系人
internal-link 对于菜单项 /#联系人

声明自定义样式:

/* for the home page */
.home .anchor-link {
   display: block; /* or inline-block, whichever is applicable */
}
.home .internal-link {
  display: none; /* hide on home page */
}

/* for every other page */
.anchor-link {
   display: none; /* hide on every other page */
}
.internal-link {
  display: block; /* or inline-block, whichever is applicable */
}

注:Wordpress有一个 body 类,适当地调用 home -您可以将其用作需要声明的任何主页特定样式规则的基本选择器。

解决方案#2-jQuery .attr() 方法

Wordpress链接到jQuery CDN库,因此我们可以利用jQuery的优势,以及它如何满足我们这里遇到的这种情况的需求。

使用jQuery .属性() 方法,我们可以编写一个脚本,检查url所锚定的元素是否已经存在于页面上,如果已经存在,我们可以从菜单项的url中删除前面的正斜杠,使其成为 锚链 而不是 内部链接 .

添加菜单项和脚本:

1. 遵循中提到的方法 解决方案#1 查看如何启用 CSS类 对于菜单项,我们需要将此类作为选择器,以
2. 将菜单项添加为 内部链接 用一个 相对url (最初最好将其作为链接,因为通常情况下, 它必须是一个-您只有带有 id #联系人 在主页上,所以我们正在编写的脚本只会 必须在主页上运行)
3. 编写脚本,然后将其添加到主题文件中,如 header.php 或 footer.php *

*我会的 建议不要编辑核心主题文件 ,任何主题更新都会丢失您的定制,如果您不完全确定自己在做什么,这也是破坏主题的一种简单方法。我强烈建议为这些定制安装一个插件,像“ &插入标题;页脚 “由 WP初学者 将完美工作,你也应该发现这个插件对这种性质的未来定制有用,不仅适用于这个“一次性用例”-大约是唯一一次你会发现我提倡使用插件,否则它只是代码膨胀和另一个插件维护。

jQuery脚本:

未经测试,但应足以证明其意图

jQuery(document).ready(function(){
  if(jQuery('#contact').length) { /* if '#contact' exists length will be greater than 0 */
    /* update the href attribute for the anchor link in question */
    jQuery('.dynamic-link a').attr('href','#contact'); 
  }
});

当文档准备好检查元素是否具有 身份证件 " 联系 “页面上已存在,如果存在,则会更新 href 属性添加自定义类( .dynamic-link ). 请注意,此自定义类已添加到 列表项目 ( li )而不是嵌套的锚链( a ).