приходят в ту же позицию при возвращении с бесконечной прокруткой

Question

Я хочу реализовать функциональность, при нажатии на кнопку «Назад» я возвращаюсь в ту же позицию. Хорошим примером может быть http://www.jabong.com/men/clothing/mens-t-shirts/. Здесь, если вы прокрутите страницу вниз и нажмете на продукт и перейдете на страницу продукта, вы достигнете той же позиции страницы, на которой находится этот продукт.

Приведенный здесь пример не добавляет ничего в URL, чтобы запомнить позицию. Кроме того, он не использует pushstate или history.js (не загружая через ajax).

Любое понимание того, как я могу это сделать?

EDIT: Im использует бесконечную прокрутку (например, pinterest), и страницы продолжают загружаться при прокрутке вниз. Когда я вернусь, запрос снова запустится и перезагрузит страницу. Если я был на 4-й странице раньше, после возвращения страницы не загружаются до страницы 4, и поэтому есть перерыв, поэтому я не могу достичь этой позиции.

Итак, мой вопрос в том, как мне это сделать с бесконечной прокруткой?

Answer 1

Если вы можете использовать JQuery в своем приложении. Вы можете попробовать WayPoint Plugin его очень прост в использовании и с вашего вопроса, я думаю, это то, что вы ищете.

вот пример Бесконечный скроллинг и о том, как он функционирует:

http://imakewebthings.com/jquery-waypoints/shortcuts/infinite-scroll/

Также обратите внимание на эти учебники для бесконечной прокрутки с использованием различных других плагинов, вы можете использовать, который когда-либо один соответствует вашим потребностям в Лучший.

http://www.jquery4u.com/tutorials/jquery-infinite-scrolling-demos/

EDIT:

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

Is it possible to write an "Infinite Scroll" javascript that can handle the back button?

Answer 2

У меня такая же проблема, и ситуация была очень похожа: нет закладки или параметры не изменились по ссылке.

Вот мое решение, и она работает:

1) Вы можете использовать window.history.go(-1) или window.history.back(), который так же, как кнопки возврата на браузер, чтобы перейти к предыдущей странице.

2) Когда вы используете эту функцию, по какой-либо причине она может не вернуться в позицию на последней странице (например, вы выбираете картинку внизу страницы и перенаправляете ее на следующую страницу. назад ', он возвращается к началу предыдущей страницы). В этом случае вам нужно установить текущее значение scrollY var currentScrollYonSession = window.scrollY на сессии или в другом месте, в зависимости от вашего кода, когда приложение перенаправляется на следующую страницу (обычно это onClick() или onChange() событие). Когда вы нажимаете кнопку «назад», и приложение загружает предыдущую страницу, сначала проверьте сеанс, что значение scrollY равно null или нет. Если он равен нулю, просто загрузите страницу так, как она есть; в противном случае получить значение scrollY, загрузить страницу и установить значение scrollY на текущую страницу: window.scroll(0, currentScrollYonSession).

Answer 3

Я придумал решение для моего приложения для достижения этой цели:

$(document).on('click', 'a', function() { 
    var scrollpos = $(window).scrollTop(); 
    localStorage.setItem('scrollpos', scrollpos); 
}); 

Это использует LocalStorage, чтобы сохранить сколько пикселей мы вниз от верхней части страницы.

var scrollplan = function() { 
    var foo = true 
    if ((foo == true) && $('.box').length > 30) { 
     var bar = localStorage.getItem('scrollpos') 
     $("html, body").animate({ scrollTop: bar}, 500); 
    } 
    $('.photosbtn').on('click', function(){ 
     var foo = false 
    }); 
    }; 

Начальная загрузка страницы имеет 30 фотографий с коробками классов. Моя разбивка на страницы начинается с нажатия на кнопку btn с классом photosbtn.