如何修复主页主菜单上损坏的滚动到 ID?

Posted

技术标签:

【中文标题】如何修复主页主菜单上损坏的滚动到 ID?【英文标题】:How to fix broken scroll-to ID on main menu of homepage? 【发布时间】:2020-02-01 20:56:30 【问题描述】:

我已经接管了维护您乐团网站的任务。不幸的是,之前的维护者安装了很多(Wordpress)插件,所以我很难弄清楚哪个插件实际用于什么。

我必须弄清楚,为什么在我们的主菜单中滚动到链接被破坏,但我什至不知道从哪里开始。 html 看起来正确:

<a href="#orchester-neu">Orchester</a> 

而链接https://www.akkordeonorchester-muenchen.de/#orchester-neu 工作得很好。

所以我查看了 Google Chrome 控制台,它会抛出类似的违规警告

[Violation] 'requestAnimationFrame' 处理程序耗时 107 毫秒

据我所知,“滚动到”是由 jQuery 的“动画”函数完成的,所以这可能是关于从哪里开始解决问题的提示。但是该网站使用 Simple Key Theme 的子主题,据我所知,到目前为止还没有自定义代码。我不介意添加自定义代码,但正如我所说,我不知道从哪里开始查找错误。

尽管它是一个 wordpress 网站,但我认为问题与 Wordpress 无关,而是与一些 javascript / jQuery -Script 有关。 我提供了上面网站的链接,所以请不要犹豫,亲自查看现场网站。任何提示我都会很高兴!

谢谢!

【问题讨论】:

【参考方案1】:

添加此 jQuery 代码,它会正常工作...

jQuery(document).ready(function($) 
    jQuery( "#primary-menu-container .menu-item a[href^='#']").on( 'click', function ( e ) 
        e.preventDefault();
        var hash = this.hash;
        var scrlTopOff = jQuery('#primary-menu').innerHeight();
        jQuery( 'html, body' ).animate( 
            scrollTop: jQuery( hash ).offset().top - scrlTopOff
        , 700, function () 
        );
    );
);

【讨论】:

感谢阿斯凡!你能向我解释一下,为什么没有你的功能它就不能工作?它以前可以工作,所以一定是有什么东西坏了? 我注意到有一个按钮可以滚动回顶部,点击它也不起作用。所以,我认为可能有其他滚动功能不起作用。您错过了一些要包含在模板中的自定义 js 文件。 好的,我如何找到丢失的文件?或者找到损坏的功能? 您必须使用 view source 将模板中包含的文件与原始主题文件进行比较。

以上是关于如何修复主页主菜单上损坏的滚动到 ID?的主要内容,如果未能解决你的问题,请参考以下文章

滚动主菜单在详细信息页面上不起作用

WebOS 应用程序未在主页上向下滚动

如何放大页面而不在页面的父组件(主组件)中显示滚动

更新反应脚本后如何修复主页上的重大更改(创建反应应用程序)

翩翩从安卓抽屉菜单中打开页面后如何刷新主页面?

在“关闭”状态下使用滚动视图启动时遇到问题