문의드립니다.
본문
현재 페이지를 부드럽게 스크롤 되게 플러그인받아서 작업하구있는데요
문제는 새로고침하면 그위치에서 새로로고침이 되지않구 상단으로 튀어 올라갑니다. 어디를 수정해야할까요 ㅠㅠ 고수님들 부탁드립니다.
'use strict';
(function($){
$.fn.inertiaScroll = function(options){
//////////////////////////////////////////////////
// options
//////////////////////////////////////////////////
var settings = $.extend({
parent: '',
childDelta1: 0.02,
childDelta2: 0.1,
parentDelta: 0.08
}, options);
//////////////////////////////////////////////////
// jqeury object
//////////////////////////////////////////////////
var $window = $(window);
var $body = $('body');
var $parent = settings.parent;
var $child = this;
//////////////////////////////////////////////////
// inertiaScroll childClass
//////////////////////////////////////////////////
var ChildBox = function(elm, offset, speed, margin){
this.elm = elm;
this.offset = offset !== undefined ? offset : 0;
this.speed = speed !== undefined ? speed : 1;
this.margin = margin !== undefined ? margin : 0;
};
ChildBox.prototype.update = function(windowOffset,offsetBottom){
this.offset += (windowOffset * settings.childDelta1 * Number(this.speed) - this.offset) * settings.childDelta2;
this.elm.css({transform:'translate3d(' + 0 + ',' + ( Number(this.margin) - Number(this.offset) ) + 'px ,' + 0 +')'});
};
//////////////////////////////////////////////////
// inertiaScroll parentClass
//////////////////////////////////////////////////
var ParentBox = function(elm, offset, speed, margin){
ChildBox.apply(this,arguments);
};
ParentBox.prototype = Object.create(ChildBox.prototype,{
constructor:{
value: ParentBox
}
});
ParentBox.prototype.update = function(windowOffset){
this.offset += (windowOffset - this.offset) * settings.parentDelta;
this.elm.css({transform:'translate3d(' + 0 + ',' + (-this.offset) + 'px ,' + 0 + ')'});
};
ParentBox.prototype.setcss = function(){
this.elm.css({
'width':'100%',
'position':'fixed'
});
};
//////////////////////////////////////////////////
// make Object
//////////////////////////////////////////////////
var Boxes = function(){
this.ChildBox = [];
this.ChildBoxLength = 0;
this.ParentBox = '';
this.windowHeight = 0;
};
Boxes.prototype = {
init:function(){
this.createElm($child,$parent);
this.loop();
},
createElm:function(child,parent){
this.ParentBox = new ParentBox(parent,0,1);
this.ParentBox.setcss();
this.boxArrayLength = child.length;
for (var i = 0; i < this.boxArrayLength; i++) {
var e = child.eq(i);
var speed = e.data('speed');
var margin = e.data('margin');
this.ChildBox.push(new ChildBox(e,0,speed,margin));
}
},
smoothScroll:function(){
var windowOffset = $window.scrollTop();
var offsetBottom = windowOffset + this.windowHeight;
this.ParentBox.update(windowOffset);
for (var i = 0; i < this.boxArrayLength; i++) {
this.ChildBox[i].update(windowOffset,offsetBottom);
}
},
loop:function(){
this.smoothScroll();
window.requestAnimationFrame(this.loop.bind(this));
}
};
//////////////////////////////////////////////////
// Done
//////////////////////////////////////////////////
$(function(){
$body.height($parent.height());
var boxes = new Boxes();
boxes.init();
});
return this;
};
})(jQuery);