CODEWITHSUNDEEP
jqueryhtmlwordpressgoogle-chrome
Mitch Sigley
Mitch Sigley

Reputation: 31

Anchor links not working on Chrome

https://forloop.com.au

The links on the nav bar are mostly anchor links that scroll to anchor tags on the wordpress template.

They are all seem to work on firefox and safari, however chrome seems to not like them.

I've tried updated the jquery scripts (as far as i know they're up to date), and enforced https across the site.

Can anybody help me with this issue? Thanks

Upvotes: 1

Views: 3851

Answers (3)

Faisal Alvi
Faisal Alvi

Reputation: 532

Please add below code in your JavaScript file:

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

Upvotes: 1

Manoj Dhiman
Manoj Dhiman

Reputation: 5166

You can use this code to scroll the page to position.

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

Upvotes: 0

Yogesh Garg
Yogesh Garg

Reputation: 333

Please use the code below

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

This Question is related to previous question. Anchor <a> tags not working in chrome when using #

Please refer this link

Upvotes: 0

Related Questions