Question

https://forloop.com.au

导航栏上的链接主要是锚点链接，可滚动到wordpress模板上的锚点标签。

它们似乎都可以在Firefox和Safari中使用，但是Chrome似乎不喜欢它们。

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

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

Answer 1

请使用下面的代码

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

此问题与先前的问题有关。 Anchor <a> tags not working in chrome when using #

请参考此链接

Answer 2

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

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

Answer 3

请在您的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);
    }
});

锚链接在Chrome上不起作用

3 个答案: