Skip to content

Instantly share code, notes, and snippets.

@e-river
Created July 24, 2014 07:22
Show Gist options
  • Save e-river/15d17e8fe17230e81887 to your computer and use it in GitHub Desktop.
Save e-river/15d17e8fe17230e81887 to your computer and use it in GitHub Desktop.
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