Fajer39
asked on
Jquery animation problem
Hello experts,
this is the site I develope - goo.gl/YCMS3q .
Q: Why the navigation menu on mobile devices doesn't scroll right?
* On desktops it's ok [don't look at styling on desktop- it's not done yet]
This is the JS:
this is the site I develope - goo.gl/YCMS3q .
Q: Why the navigation menu on mobile devices doesn't scroll right?
* On desktops it's ok [don't look at styling on desktop- it's not done yet]
This is the JS:
$(function() {
var nav = $('.nav');
var navLiA = $('.nav>ul>li>a');
var collapse = $('#collapse');
var collapsedSpan = $('#collapse > span');
//full-screen bg
fullHeightBg('.header');
$(window).on('resize', function() {
fullHeightBg('.header');
});
//hamburger button menu
$(collapse).on('click', function() {
$(nav).toggle();
$(collapsedSpan).toggleClass('fa-bars fa-close');
});
$(navLiA).on('click', function(e) {
e.preventDefault;
var scrollAnchor = $(this).attr('href');
var scrollPoint = $(scrollAnchor).offset().top;
$('html, body').animate({
scrollTop : scrollPoint
}, 700);
if (collapse.is(":visible") ) {
$(nav).hide();
$(collapsedSpan).removeClass('fa-close').addClass('fa-bars');
}
});
});
What are we looking for - seems to work fine here.
ASKER
Please try to click couple of time to the navigation links without refreshing on mobile devices.
IOS 8.4- Safari,- when click on contact- it scrolls to the wrong coordinates.
Android 4.3 - It's like the "final destination" of the scroll is shown right after the click(overlays the header) for like 100ms, then it disappears and then the scroll start.
EDIT: The problem from android actually happens on all devices- it was just so fast that I didn't noticed it at first
IOS 8.4- Safari,- when click on contact- it scrolls to the wrong coordinates.
Android 4.3 - It's like the "final destination" of the scroll is shown right after the click(overlays the header) for like 100ms, then it disappears and then the scroll start.
EDIT: The problem from android actually happens on all devices- it was just so fast that I didn't noticed it at first
Nope - seems to work fine for me scrolls to the right place every time.
Do you see the same thing happening here http://mobiletest.me/?
Do you see the same thing happening here http://mobiletest.me/?
ASKER
I tried it on the real phones, not emulators...The problem is that in chrome dev tools, everything is fine too, but on the actual device...it's not the case...it's ok on the http://mobiletest.me/ but that's not keeping me calm because my girlfriend's iphone 5 and my galaxy s4 still don't work right with this features
Going to be difficult to debug then.
Try disabling different scripts on your page and see if that makes a difference.
Try disabling different scripts on your page and see if that makes a difference.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
self-explanatory