锚链接在 Chrome 上不起作用

Question

https://forloop.com.au

导航栏上的链接大多是锚链接，滚动到 wordpress 模板上的锚标签。

它们似乎都适用于 Firefox 和 safari，但是 chrome 似乎不喜欢它们。

我已经尝试更新 jquery 脚本（据我所知它们是最新的），并在整个站点上强制执行 https。

有人可以帮我解决这个问题吗？ 谢谢

Answer 1

请在您的 JavaScript 文件中添加以下代码：

jQuery(document).on('click','.menu-item a', function(event) {
    var url = jQuery(this).attr('href');
    //checking if # tag available!
    if(url.indexOf('#') !== -1) {
        event.preventDefault();
        var url =  url.split('#')[1];
       //calculationg sticky nav height to remove it from scroll length!
        var stickyNavHeight = jQuery('nav.clearfix').height();
        jQuery('html, body').animate({
            scrollTop: jQuery('#'+url).offset().top - stickyNavHeight
        }, 1000);
    }
});

Answer 2

请使用下面的代码

$(document).ready(function () {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    if (window.location.hash && isChrome) {
        setTimeout(function () {
            var hash = window.location.hash;
            window.location.hash = "";
            window.location.hash = hash;
        }, 300);
    }
});

这个问题与上一个问题有关。 使用 # 时锚 <a> 标签在 chrome 中不起作用

请参考这个链接

Answer 3

您可以使用此代码将页面滚动到位置。

jQuery(document).on('click','.menu-item a', function(event) {
    event.preventDefault();
    var url = jQuery(this).attr('href').split('#')[1];
    //var target = "#" + this.getAttribute('data-target');
    jQuery('html, body').animate({
        scrollTop: jQuery('#'+url).offset().top
    }, 1000);
});