我创建了一个带有jquery.mousewheel和scrollTo的系统,每次移动鼠标滚轮时都会滚动800像素。浏览与此网站类似:http://beoplay.com/Products/BeoplayA8#sound-experience
我目前的代码如下:
var position = 1;
var rotation= true;
var ezin= 'easeInOutExpo';
if (position==1){
$.scrollTo('0px', 100, { axis:'y',easing: ezin });
$('.variable').text("1");
}
function DEL1AL2(){
rotation= false;
$('.variable').text("2");
$.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });
}
function DEL2AL1(){
rotation= false;
$('.variable').text("1");
$.scrollTo('0px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=1;} });
}
function DEL2AL3(){
rotation= false;
$('.variable').text("3");
$.scrollTo('1600px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=3;} });
}
function DEL3AL2(){
rotation= false;
$('.variable').text("2");
$.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2} });
;
}
$(document).mousewheel(function(event, delta) {
if (delta > 0 && rotation==true){
if(position==2){
DEL2AL1();
};
if(position==3){
DEL3AL2();
};
}
else if (delta < 0 && rotation==true){
if(position==1){
DEL1AL2();
};
if(position==2){
DEL2AL3();
};
};
event.preventDefault();
});});
系统附加了一个数字变量,因此当您处于位置1并向下滚动时,该功能向下滚动800像素并将位置变量更改为2.
如何添加深层链接(我认为这是术语),所以当位置为2时,URL会反映出来(例如www.myexample.com/#2),因此链接实际上是你到了第二个位置?
我尝试这样做的唯一原因是因为我希望页面的不同位置拥有自己的Facebook喜欢(投资组合项目),如果这种深层链接是不必要的,并且有更好的方法来实现我是所有的耳朵。
另外,如果您在我当前的代码中发现任何错误,请告诉我,我正在慢慢学习,欢迎任何我可以修饰的内容。
提前致谢。
答案 0 :(得分:0)
首先,当您到达某个位置时更改窗口位置:
var baseLocation = window.location;
function DEL1AL2(){
rotation= false;
$('.variable').text("2");
$.scrollTo('800px', 800, { axis:'y',easing: ezin, onAfter: function() {rotation= true; position=2;} });
window.location = baseLocation+'#2';
}
然后当您加载页面时,您可以执行以下操作:
$(window).ready(function(){
if (window.location.hash){
// ...code to check what's the position that corresponds to the hash link.
if (window.location.hash=='2'){ DEL1AL2();}
// ...etc
});
});
答案 1 :(得分:0)
如果您想在滚动到特定元素时获得平滑滚动动画,可以查看以下插件:
http://flesler.blogspot.be/2007/10/jqueryscrollto.html
此插件允许您根据以下内容滚动到某个位置: