Ведение позиции прокрутки большой HTML-страницы при возврате клиента

Я обслуживаю очень длинные html-страницы (короткие книги)

Когда клиент возвращается, слишком много хлопот, чтобы попытаться найти точное место, где его остановили из-за длинной страницы html.

Есть ли простой способ сохранить позицию прокрутки автоматически, чтобы в следующий раз, когда клиент вернется на страницу, страница автоматически прокручивается туда, где он остановился. это должно быть прозрачным, т.е. не нажимать "сохранить" положение прокрутки.

Ответы

Ответ 1

Шаги просты, но решение этого вопроса зависит от вашей реализации приложения, вы можете:

  • Извлеките текущую позицию прокрутки, вы можете использовать:

    window.pageYOffset

  • Сохраните позицию, у нее две части, когда и где:

    • Вы можете выбрать сохранение данных, когда окно закрывается, или каждый раз, когда пользователь прокручивает или на заданном интервале...

    • для "where", в зависимости от вашего приложения, вы можете захотеть сохранить его в куки файле локального хранилища на стороне сервера (если пользователю необходимо войти в систему, чтобы прочитать электронную книгу)...

  • Восстановить позицию, когда пользователь вернется, путем извлечения сохраненных данных и прокрутки до этой позиции с помощью

    window.scrollTo(0, position);

поэтому настоящая проблема заключается в том, когда и где хранить позицию, и это зависит от вашего приложения.

Ответ 2

Вы всегда можете использовать событие onbeforeunload для проверки, когда окно закрывается, и установить cookie с текущей позицией. Чем каждый раз, когда загружается страница, просто проверяйте, установлен ли этот файл cookie. Если это - используйте значение для перенаправления пользователя в сохраненную позицию.

Обновление

Вы должны понимать концепции, чтобы заставить их работать. Вы можете прочитать о файлах cookie и о том, как взаимодействовать с ними в javascript здесь. Ссылка содержит живой пример.

Onunload и onbeforeunload - это события javascript, которые вы можете использовать для обнаружения, когда ваша страница закрывается. Вы должны понимать, что это такое и как их использовать.

Вы можете проверить этот вопрос для ответа, как перейти к определенному смещению и этот посмотреть, как его извлечь.

Я дал вам все кусочки головоломки, это вам, чтобы собрать их вместе.

Ответ 3

Я сделал небольшой плагин jquery, который вы можете включить и иметь эту функцию без файлов cookie и т.д. Включите перед тегом конец тега.

  <script type="text/javascript" src="/js/maintainscroll.jquery.min.js"></script>
</body>

https://github.com/evaldsurtans/maintainscroll.jquery.js