Одностраничный веб-сайт, который я хочу получить в определенный момент после обновления страницы

Question

У меня есть один постраничный веб-сайт, в котором у меня есть div с именем sitecontent шириной 4400, который содержит 4 "страницы". Страницы начинаются с 0 пикселей контента сайта, 1100 пикселей контента сайта, 2200 пикселей контента сайта и 3300 пикселей.

Я использую Jquery, чтобы установить позицию de div в правильном px, чтобы получить нужный текст. После нажатия на ссылку я получаю, например:

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

На одной из страниц мне нужно обновить страницу, и после этого обновления я хочу, чтобы страница отображала ту же самую "страницу" на 1100px, но она начинается с 0px, домашней страницы.

Есть ли способ, как я могу убедиться, что sitecontent начинается с -1100px дома?

Заранее спасибо,

ура

Answer 1

Вам нужно добавить некоторый идентификатор в хеш URL, который вы можете проанализировать при загрузке страницы.

Например:

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

Затем при загрузке страницы вы можете проверить это значение хеш-функции и сразу же изменить интерфейс, чтобы показать новую страницу:

 var hash = window.location.hash;

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

Answer 2

Вы можете использовать куки-файл для хранения значения, а затем при каждой загрузке страницы вам нужно проверять куки-файл и иметь дело с полученным значением:

Ссылка для 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, что позволяет посетителю возобновить работу сайта.

Answer 3

Подход, очень похожий на то, что предлагает 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/)