將URL附加到jquery函數

我創建了一個帶有jquery.mousewheel和scrollTo的系統，每次移動我的鼠標滾輪時都會滾動800像素。瀏覽與此類似網站：http://beoplay.com/Products/BeoplayA8#sound-experience 將URL附加到jquery函數

我當前的代碼如下所示：

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喜歡（投資組合項目），如果深層鏈接是不必要的，有更好的方法來完成，我」所有的耳朵。另外，如果您在我當前的代碼中看到任何錯誤，請告訴我，我正在慢慢地學習，任何可以拋光的東西都是值得歡迎的。

在此先感謝。

來源

2012-11-15 Dlacrem

那麼基本上，錨點滾動？ – Flater

不確定，但我會考慮這一點。作爲新手意味着有時我找不到教程，因爲我不知道這些條款。 – Dlacrem

首先，改變窗口的位置，當你到達一定的位置：

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

來源

2012-11-15 15:59:11 Ohad

我會盡快嘗試，看起來我認爲它可以工作。感謝回覆。 – Dlacrem

我使用'window.location.hash ='products';'在每個DELxALy函數中添加位置，它可以工作，但我似乎無法找到觸發函數的方法，具體取決於當前url，嘗試與 '$（document）.ready（function（）{\t if（window。location.hash =='products'）{ \t \t DEL1AL2（）; }; }）;' 但它似乎沒有工作，我在這裏做錯了什麼？另外，有沒有一種方法來美化網址？目前，我正在獲取/mousescroll.htm#products，當我寧願獲得/ products或/＃產品 – Dlacrem

如果你想順利滾動滾動到一個特定的元素時的動畫，你可以檢查出如下因素插件：

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

這個插件允許您基於滾動到某一位置：

原始數
的字符串（'44' ， '100像素'， '+ = 30PX' 等）
DOM元素（邏輯上，可滾動元素的子元素）
選擇器，它將相對於可滾動元素
字符串'max'滾動到結尾。
一個字符串，指定滾動到該容器部分的百分比（f.e：50％轉到中間）。
散列{top：x，left：y}，x和y可以是任何類型的數字/字符串，如上所述。

來源

2012-11-16 10:21:27 Flater

我正在使用該插件時，請注意代碼中的$ .scrollTo ...零件:) – Dlacrem

在這種情況下我不確定實際問題是什麼。您可以將一個元素傳遞給'scrollTo'（或一個導致元素的選擇器），並且該插件將滾動到該給定元素。你能否詳細說明還需要什麼？ – Flater

將URL附加到jquery函數

回答

相關問題