I'm trying to get difference between current distance of element from the top and its next position after scrolling. In fact I'm trying to choose animation duration depending on its distance. I wrote the code below but it's not work correctly-
I have 6 menu items, which when I clicked on each one, the window scrolled to its position. But the matter is when I click on the last one item it should move over 3000px in 2 second that I want to increase the time by getting the distance. Unfortunately when I add the if - else if
section some of items don't work. I meant after clicking on them nothing happened.
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var scrolingMenuTime=1500;
var hashTagActive = "";
$(".item, .item-f").click(function (ev) {
if(hashTagActive != this.hash) {
ev.preventDefault();
var next = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
next = $(document).height() - $(window).height();
} else {
next = $(this.hash).offset().top;
}
var currentPosition=$(this).offset().top;
var diffPos=Math.abs(next-currentPosition);
if (diffPos >= h && diffPos < 2*h){
scrolingMenuTime=1700;
}else if(diffPos >= 2*h && diffPos < 3*h){
scrolingMenuTime=2500;
}else if(diffPost >= 3*h && diffPos < 4*h){
scrolingMenuTime=3500;
}else if(diffPos >= 4*h && diffPos < 5*h){
scrolingMenuTime=4500;
}else if(diffPos >= 5*h){
scrolingMenuTime=5500;}
else{
return false;
}
$('html,body').animate({
scrollTop: next
}, scrolingMenuTime, 'easeOutBack');
hashTagActive = this.hash;
location.hash = '';
}
});
And also I have to tell that when I delete the if - else if
section then the code works correctly. What is the wrong with if - else if
section?