0

我有一个单页网站，其中有一个名为 sitecontent 的 div，宽度为 4400，其中包含 4 个“页面”。页面从站点内容的 0 像素、站点内容的 1100 像素、站点内容的 2200 像素和 3300 像素开始。

我使用 Jquery 将 de div 位置设置为正确的 px，因此我可以显示正确的文本。按下链接后，我得到例如：

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

在其中一个页面上，我必须刷新页面，刷新后我希望页面在 1100px 上显示相同的“页面”，但它从主页 0px 开始。

有什么办法可以确保站点内容从首页的-1100px开始？

提前致谢，

干杯

4

3 回答 3

3

您需要将一些标识符附加到您可以在页面加载时解析的 URL 的哈希值上。

例如：

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

然后在页面的加载中，您可以检查此哈希值并立即更改 UI 以显示新页面：

 var hash = window.location.hash;

 if(hash == "#page1")
    $('#site-content').css('left', '-1100px');
于 2012-05-03T19:02:09.203 回答
0

您可以使用 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 创建，以及用于识别页码的 id。

这样做的一个好处是您可以控制 cookie 的保留时间，从而允许访问者恢复网站体验。

于 2012-05-03T19:12:31.773 回答
0

一种与 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-03T19:32:36.857 回答