单页网站，我想在刷新页面后的某个时间点获得

Single paged website, which i want to get at a certain point after refreshing page

本文关键字：时间 网站 刷新 单页      更新时间：2023-09-26

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

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

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

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

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

提前感谢，

干杯

您需要将

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

例如：

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

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

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

您可以使用 cookie 来存储值，然后，每次页面加载时，您都需要检查 cookie 并处理收集的值：

Jquery Cookie 的链接与下载和使用手册！

网页（示例） 

<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 的保留时间，从而允许访问者恢复网站体验。

一种与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/）

相关文章：