将URL附加到jquery函数

时间:2012-11-15 14:50:58

标签: jquery scrollto deep-linking

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

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

提前致谢。

2 个答案:

答案 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

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

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