Hello! Previously your team had helped me with an issue regarding scrolling anchor menus on my page. The below code was added to my global JS.
However, for some reason now this code is crashing with some icon/image menus I have on the page in mobile view, link to page here. The 3 rows of icons you see below the main banner on the page now no longer work properly when I try to use them on mobile, I need to hold down and open the link in a new tab which was not the case before. Desktop view is fine, issue only on mobile.
Could you please take a look and advise if I need to make some adjustments, or what may have happened to affect the change? If I remove the below code, the mobile icon menu works fine (but of course the topbar menu no longer scrolls nicely.)
Thanks in advance!
jQuery(document).ready(function ($){
$('a[href*="#"]:not(.x-portfolio-filter)').off( "click touchstart");
$('a[href*="#"]:not(.x-portfolio-filter)').on('touchend click', function(e) {
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($el).offset().top -38
}, 450);
return false;
}
}
});
});
(function($){
$('a[href*="#"]').on('touchstart', function(e) {
e.preventDefault();
});
$('a[href*="#"]').on('touchend click', function(e) {
href = $(this).attr('href');
notComments = href.indexOf('#comments') === -1;
if ( href !== '#' && notComments ) {
var theId = href.split('#').pop();
var $el = $('#' + theId);
if ( $el.length > 0 ) {
e.preventDefault();
animateOffset($el, 850, 'easeInOutExpo');
}
}
});
})(jQuery);