Question

我创建了一个带有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喜欢（投资组合项目），如果这种深层链接是不必要的，并且有更好的方法来实现我是所有的耳朵。

另外，如果您在我当前的代码中发现任何错误，请告诉我，我正在慢慢学习，欢迎任何我可以修饰的内容。

提前致谢。

Answer 1

首先，当您到达某个位置时更改窗口位置：

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
    });
});

Answer 2

如果您想在滚动到特定元素时获得平滑滚动动画，可以查看以下插件：

http://flesler.blogspot.be/2007/10/jqueryscrollto.html

此插件允许您根据以下内容滚动到某个位置：

原始数字
一个字符串（'44'，'100px'，'+ = 30px'等）
DOM元素（逻辑上，可滚动元素的子元素）
一个选择器，它将相对于可滚动元素
字符串'max'滚动到结尾。
一个字符串，指定滚动到容器部分的百分比（f.e：50％转到中间）。
哈希{top：x，left：y}，x和y可以是任何类型的数字/字符串，如上所述。

将URL附加到jquery函数

2 个答案: