Question

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

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

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

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

有什么方法可以确保网站内容从家庭的-1100px开始？

提前致谢，

干杯

Answer 1

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

例如：

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

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

 var hash = window.location.hash;

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

Answer 2

您可以使用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");
  }
});

注意：

您当前用于更改页面的链接应该具有触发cookie创建的类“setCookie”，以及用于标识页码的ID。

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

Answer 3

与Tejs提议的非常类似的方法是使用基于散列的路由框架来监听散列更改。这将导致更清晰的代码，因为您不需要在两个不同的位置定义滚动。

jQuery事件监听器当前正在观察页面中的每个链接（onclick - ＆gt;将内容容器移动到显示所需内容）。 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/）

单页网站，我想在刷新页面后获得某一点

3 个答案: