Получить текущую позицию прокрутки и передать ее как переменную со ссылкой?

StackOverflow https://stackoverflow.com/questions/1022652

  •  06-07-2019
  •  | 
  •  

Вопрос

Я буду честен, я далеко от моей глубины здесь. Я создал систему разбивки на страницы, где вы нажимаете на ссылку, она перезагружает страницу, и определенное количество элементов списка отображается в неупорядоченном списке. Когда вы нажмете на нее еще раз, она перезагрузит страницу и отобразит больше элементов. Подумайте, как Twitter показывает твиты в вашем фиде.

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

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

Вот мой код: 

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

Куда мне идти отсюда?

Это было полезно?

Решение

<Ол>

  • Перезагрузите элементы, используя AJAX вместо перезагрузки всей страницы.

  • Получите и установите положение прокрутки, используя window.pageYOffset и window.scrollTo (0, y) .

    Я бы сохранил позицию в хеше URL: 

    // after loading the document, scroll to the right position
// maybe location.hash has to be converted to a number first
$(document).ready(function() {
    window.scrollTo(0, location.hash);
});

// I'm not quite sure if reload() does preserve the hash tag.
location.hash = window.pageYOffset;
location.reload();

    • Другие советы

    Как сказал gs, добавляйте элементы с помощью вызова ajax вместо перезагрузки страницы.

    Если вы не хотите использовать jQuery.ScrollTo плагин. Который поддерживает все, что связано с прокруткой, о которой вы могли когда-либо мечтать

    Я думаю, что вам нужно просто передать HTML-якорь в конце вашей ссылки. Браузер автоматически перейдет к элементу рядом с соответствующим якорем. Пример: 

    <a href="page2.html#myanchor">Next page</a>

    В какой-то момент в середине страницы 2: 

    <a name="myanchor">My item N</a>

    Согласно ссылке @Shawn Grigson, pageYOffset не поддерживается одинаково во всех браузерах.

    Решение jQuery (надеюсь, действительно совместимое с несколькими браузерами, хотя я еще не тестировал его) для получения и установки вертикальной прокрутки элемента - это scrollTop () .

    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top