我有HTML应用程序,有人为用于滚动的JavaScript编写了javascript库。现在我想滚动到该库的特定div,我不必使用location.href
或`location.hash``我必须使用JS库执行此操作,代码是这样的。
var ScrollPage = BGBiRepScroller.ScrollPage = function(){
this.animationFunList = [];
}
ScrollPage.prototype = {
$el:null,
$sectionList:null,
sectionPositionsY:null,
startTouchY:0,
startScrollY:0,
initTop:0,
endTouchY:0,
endDistance:0,
acceleration:8,
containerHeight:600,
currentSectionIndex:0,
isScrolling:false,
snapSection:true,
create: function($tEl){
this.$el = $tEl;
this.sectionPositionsY = new Array();
this.$sectionList = this.$el.find(".scrollSection");
var $origParent = this.$el.parent();
var $tempHolder = $("<div></div>");
$("body").append($tempHolder);
$tempHolder.css("opacity",0);
$tempHolder.append(this.$el);
this.$el.transition({ y: 0},0);
if(this.$sectionList.length>0){
this.initTop = this.$sectionList.position().top;
console.log("this.initTop::" + this.initTop);
for(var i=0; i<this.$sectionList.length; i++){
this.sectionPositionsY.push($(this.$sectionList[i]).position().top);
console.log($(this.$sectionList[i]).position().top);
}
}
$origParent.prepend(this.$el);
$tempHolder.remove();
this.createTouchEvents();
},
createTouchEvents: function(){
if(this.$el){
this.$el[0].ScrollPage = this;
this.$el.on(BGBiRep.Events.TOUCH_START, this._onTouchStart);
this.$el.on(BGBiRep.Events.TOUCH_END, this._onTouchEnd);
if(BGBiRep.isTouchDevice){
this.$el.on(BGBiRep.Events.TOUCH_MOVE, this._onTouchMove);
}
}
},
getSnapToY: function(_y){
var middleY = _y - this.containerHeight*.5;
if(this.snapSection){
for(var i=0; i<this.$sectionList.length; i++){
var $_currentEl = $(this.$sectionList[i]),
elTop = this.sectionPositionsY[i]-this.initTop;
if(-middleY<elTop){
//console.log('getSnapToY: middleY::' + middleY + ' ::elTop::' + elTop + ' ::this.initTop::' + this.initTop);
return 0;
}else if((-middleY>=elTop && -middleY<=elTop+$_currentEl.height()+10) || i==this.$sectionList.length-1){
//console.log("entering :: " + i);
this.currentSectionIndex = i;
if(i==0){return 0;}
return -(elTop - (this.containerHeight - $_currentEl.height())*.5);
}
}
}else{
console.log('_y::' + _y);
if(_y<-this.$el.find(".col1").height() + 550){
return -this.$el.find(".col1").height()+550;
}else if(_y>0){
return 0;
}else{
return _y;
}
}
return 0;
},
addAnimation: function(_sectionName, _function){
this.animationFunList.push(new Array(_sectionName, _function));
},
getAnimation: function(_sectionName){
for(var i=0; i<this.animationFunList.length; i++){
if(this.animationFunList[i][0] == _sectionName){
return this.animationFunList[i][1];
}
}
},
stopTransition: function(){
this.$el.css("transition", "transform 0s");
this.$el.css("-webkit-transition", "transform 0s");
},
_onTouchStart: function(event, touch){
var touch ;
this.ScrollPage.isScrolling = true;
if(BGBiRep.isTouchDevice){
touch = event.originalEvent.touches[0] || event.originalEvent.changedTouches[0];
}
var transformY = parseFloat(String(this.ScrollPage.$el.css('translate')).split(',')[1]) ;
this.ScrollPage.startTouchY = this.ScrollPage.endTouchY = (BGBiRep.isTouchDevice) ? touch.pageY : event.pageY;
this.ScrollPage.startScrollY = transformY;
if(!BGBiRep.isTouchDevice){
this.ScrollPage.$el.on(BGBiRep.Events.TOUCH_MOVE, this.ScrollPage._onTouchMove);
}
this.ScrollPage.stopTransition();
//this.ScrollPage.$el.css('-webkit-transition', '');
//this.ScrollPage.$el.css('transition', '');
},
_onTouchMove: function(event){
event.preventDefault();
var touch ;
this.ScrollPage.isScrolling = true;
if(BGBiRep.isTouchDevice){
touch = event.originalEvent.targetTouches[0];
}
var tY = (BGBiRep.isTouchDevice) ? touch.pageY : event.pageY;
var transY = this.ScrollPage.startScrollY - (this.ScrollPage.startTouchY - tY);
var maxY = (this.ScrollPage.snapSection)?(-this.ScrollPage.sectionPositionsY[this.ScrollPage.$sectionList.length-1]+this.ScrollPage.initTop):-this.ScrollPage.$el.find(".col1").height() + 580;
if(this.ScrollPage.currentSectionIndex == 0 && transY>0){
transY=0;
}else if(this.ScrollPage.currentSectionIndex == this.ScrollPage.$sectionList.length-1 && transY<maxY){
transY = maxY;
}else if(!this.ScrollPage.snapSection && transY<maxY){
transY = maxY;
}
this.ScrollPage.$el.transition({ y: transY},0);
this.ScrollPage.endDistance = this.ScrollPage.endTouchY-tY;
this.ScrollPage.endTouchY = tY;
},
_onTouchEnd: function(event, touch){
if(!BGBiRep.isTouchDevice){
this.ScrollPage.$el.off(BGBiRep.Events.TOUCH_MOVE, this.ScrollPage._onTouchMove);
}
if(this.ScrollPage.isScrolling){
var newY = this.ScrollPage.startScrollY - (this.ScrollPage.startTouchY - this.ScrollPage.endTouchY) - this.ScrollPage.endDistance*this.ScrollPage.acceleration;
console.log("newY::" + newY + "::" + this.ScrollPage.startScrollY + "-" + (this.ScrollPage.startTouchY - this.ScrollPage.endTouchY) + "-" +this.ScrollPage.endDistance*this.ScrollPage.acceleration);
this.ScrollPage.startScrollY = this.ScrollPage.startTouchY = this.ScrollPage.endTouchY = this.ScrollPage.endDistance=0;
//console.log("newY::-310::" + this.ScrollPage.getSnapToY(-310));
var tSCCROLL = this.ScrollPage;
this.ScrollPage.$el.css('-webkit-transition', '');
this.ScrollPage.$el.css('transition', '');
var tSnap =this.ScrollPage.getSnapToY(newY);
var transformY = parseFloat(String(this.ScrollPage.$el.css('translate')).split(',')[1]) ;
console.log('tSCCROLL.currentSectionIndex ' +tSCCROLL.currentSectionIndex);
var tFun = function(){
var tDid = $(tSCCROLL.$sectionList[tSCCROLL.currentSectionIndex]).attr("data-id");
console.log('inside tFun');
if(tDid && tDid!=''){
console.log('inside tDid');
tSCCROLL.getAnimation(tDid)();
console.log(tSCCROLL.getAnimation(tDid));
}
}
if(tSnap!=transformY){
tFun();
this.ScrollPage.$el.transition({ y: tSnap}, tFun);
}
}
this.ScrollPage.isScrolling = false;
}
}
现在点击div部分我想移动到特定部分
$('.purple li').click(function(e)
{
//SOMETHING
});
我怎么能实现这一点请有人帮忙