單頁面網站，我想在刷新頁面後得到某個點

我有一個單獨的分頁網站，其中我有一個名爲sitecontent的寬度爲4400的div，它包含4個「頁面」。這些頁面從sitecontent的0px開始，1100px的sitecontent，2200px的sitecontent和3300px。單頁面網站，我想在刷新頁面後得到某個點

我使用jquery將de div位置設置爲正確的px，所以我得到正確的文本顯示。按一個鏈接後，我得到例如：

<div id="site-content" style="left: -1100px;">

在我需要刷新頁面的一個頁面，而這個刷新後，我想在頁面上1100px顯示相同的「頁面」，但它開始於0px，主頁。

有什麼辦法可以確保sitecontent始於-1100px的家庭嗎？

由於提前，

乾杯

來源

2012-05-03 coderjoe

你需要一些標識追加到，你可以在頁面加載解析URL的哈希值。

例如：

http://www.somewebpage.com/somepage#page1

然後在頁面的加載，你可以檢查這個散列值，並立即更改UI以顯示新的頁面：

var hash = window.location.hash; 

if(hash == "#page1") 
    $('#site-content').css('left', '-1100px');

來源

2012-05-03 19:02:09 Tejs

我現在得到了這一點，但它不工作，我在做什麼錯？ '（jQuery（document）.ready（）{jQuery（'＃slideshow'）。fadeSlideShow（）; var hash = window.location.hash; if（hash ==「＃page2」）$（'＃site-content '）.css（'left'，'-1100px'）; else if（hash ==「＃page3」）$（'＃site-content'）.css（'left'，'-2200px'）; else if （hash ==「＃page4」）$（'＃site-content'）.css（'left'，'-3300px'）; else（hash ==「＃page1」）$（'＃site-content'） .css（'left'，'0px'）;}）;' – coderjoe

可以使用cookie來存儲該值，然後，每次頁面加載時，都需要檢查cookie並處理收集的值：

Jquery Cookie的鏈接包含下載和使用手冊！

HTML（例如）

<a href="#" title="Go Page 1" id="page_01" class="setCookie"> 
    Click to view page 01 
</a>

JQUERY（jquery.cookie）

// SET THE COOKIE 
$('.setCookie').bind("click", function() { 
    var pageNumber = $(this).attr("id"); 
    $.cookie('the_cookie_name', pageNumber, { expires: 7, path: '/' }); 
}); 


// READ THE COOKIE 
$(function() { 
    var oldNumber = $.cookie('the_cookie_name'); 
    if (oldNumber !== NULL) { 
    $("#page_"+oldNumber).trigger("click"); 
    } 
});

注：

您當前使用的改變頁面的鏈接，應該有類「setCookie」來觸發cookie創建，以及用於標識頁碼的標識。

這樣做的一個優點是您可以控制cookie保存多長時間，從而允許訪問者恢復網站體驗。

來源

2012-05-03 19:12:31 Zuul

與Tejs提出的方法非常類似的方法是使用基於散列的路由框架來監聽散列更改。這將導致更簡潔的代碼，因爲你不需要在兩個不同的地方定義滾動。

當前正在通過jQuery事件偵聽器（onclick - >將內容容器移動到顯示所需內容）觀察頁面中的每個鏈接。 HTML看起來可能有點像這樣：<a href="#">Contact details</a>。

使用這種方法，您不需要看這些鏈接。相反，只需讓他們更改散列：<a href="#page2">Contact details</a>。

現在觀察散列並對變化做出反應。我正在使用Simrou框架（https://github.com/buero-fuer-ideen/Simrou），但您可以使用任何其他提供類似功能的框架。

jQuery(document).ready(function() { 
    // Define a function that moves the content, e.g. moveContent(3300); 
    function moveContent(pixelPosition) { 
     $('#site-content').css('left', '-' + pixelPosition + 'px'); 
    } 

    // Setup the router 
    var router = new Simrou({ 
     'page1': function() { moveContent(0); }, 
     'page2': function() { moveContent(1100); }, 
     'page3': function() { moveContent(2200); }, 
     'page4': function() { moveContent(3300); } 
    }); 
    router.start(); 
});

這就是您需要的所有javascript！

（這裏是一個快速和骯髒的小提琴，充分展示了整個事情：http://jsfiddle.net/R7F6r/）

來源

2012-05-03 19:32:36 Niko

單頁面網站，我想在刷新頁面後得到某個點

回答

相關問題