210915 어제에 이어서 순수 제이쿼리로 원페이지 스크롤 구현을 완성해보고, 미리 디자인 작업을 해 놓았던 App랜딩페이지를 템플릿에 입히는 작업을 했다.
$("#container > div").each(function(index) {
$(this).attr("data-index", ht * index); // 각 div마다 data 값으로 윈도우 높이
});
$("#container > div").mousewheel(function(event, delta) {
event.preventDefault();
var divPos = parseInt($(this).attr("data-index"));
if (delta > 0) {
$("html, body").stop().animate({"scrollTop": divPos - ht}, 700, "linear");
} else if (delta < 0) {
$("html, body").stop().animate({"scrollTop": divPos + ht}, 700, "linear");
}
});
$("#container > div").mousewheel(function(event, delta) {
event.preventDefault();
if (delta > 0) {
var prev = $(this).prev().offset().top;
$("html, body").stop().animate({"scrollTop": prev}, 1000, "linear");
} else if (delta < 0) {
var next = $(this).next().offset().top;
$("html, body").stop().animate({"scrollTop": next}, 1000, "linear");
}
});