Accordion with scrolltop using Zepto.js
Zepto(function($){ | |
var acc = new Accordion(); | |
acc.init(); | |
}); | |
function Accordion(){ | |
this.toggle = $('.mod-accordion_heading_toggle'); | |
this.panel = $('.mod-accordion_panel'); | |
} | |
Accordion.prototype.init = function(){ | |
var self = this; | |
self.toggle.removeClass('isOpen').addClass('isClose'); | |
self.panel.removeClass('isOpen').addClass('isClose'); | |
self.toggle.on('click', $.proxy(self.event, self)); | |
}; | |
Accordion.prototype.event = function(e){ | |
var self = this; | |
e.preventDefault(); | |
self.slideOpen(e.currentTarget); | |
self.transition(e.currentTarget); | |
}; | |
Accordion.prototype.slideOpen = function(target){ | |
var self = this; | |
if($(target).hasClass('isClose')) { | |
$(target).removeClass('isClose').addClass('isOpen'); | |
$(target).parent().next().removeClass('isClose').addClass('isOpen'); | |
} else { | |
$(target).removeClass('isOpen').addClass('isClose'); | |
$(target).parent().next().removeClass('isOpen').addClass('isClose'); | |
} | |
}; | |
Accordion.prototype.transition = function(target){ | |
var self = this, | |
position = Math.floor($(target).parent().offset().top), | |
scrollNumber = position; | |
self.scroll(scrollNumber, 100); | |
}; | |
Accordion.prototype.scroll = function(scrollTo, duration){ | |
var scrollFrom = parseInt(document.body.scrollTop), | |
num = 0, | |
run = 5, | |
timer; | |
scrollTo = parseInt(scrollTo); | |
duration /= run; | |
timer = setInterval(function () { | |
i++; | |
document.body.scrollTop = (scrollTo - scrollFrom) / duration * num+ scrollFrom; | |
if (num >= duration) { | |
clearInterval(timer); | |
} | |
}, run); | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment