Скроллит страницу вверх при ajax пагинации pdoPage
Добрый день!
Ребята, столкнулся с такой проблемой — при выводе товаров miniShop2 через pdoPage с Ajax пагинацией, ajax пагинация работает, но страница скроллится на самый верх. Код вызова такой:
Ребята, столкнулся с такой проблемой — при выводе товаров miniShop2 через pdoPage с Ajax пагинацией, ajax пагинация работает, но страница скроллится на самый верх. Код вызова такой:
<div id="pdopage" class="list-layout products-area active">
<div class="rows">
<ul>
[[!pdoPage? &element=`msProducts`
&limit=`1` &ajaxMode=`default`
&tplPageWrapper=`@INLINE <div class="pagination"><ul>[[+first]][[+prev]][[+pages]][[+next]][[+last]]</ul></div>`
&tplPageFirst=`@INLINE <li class="prev"><a href="[[+href]]">Первая</a></li>`
&tplPageLast=`@INLINE <li class="next"><a href="[[+href]]">Последняя</a></li>`
&tplPagePrev=`@INLINE <li><a href="[[+href]]"><i class="fa fa-long-arrow-left"></i></a></li>`
&tplPageNext=`@INLINE <li class="control"><a href="[[+href]]"><i class="fa fa-long-arrow-right"></i></a></li>`
&tplPageSkip=`@INLINE <li>...</li>`
&tplPageFirstEmpty=`@INLINE <li class="prev"><a>Первая</a></li>`
&tplPageLastEmpty=`@INLINE <li class="next"><a>Последняя</a></li>`
&tplPagePrevEmpty=`@INLINE <li><a><i class="fa fa-long-arrow-left"></i></a></li>`
&tplPageNextEmpty=`@INLINE <li><a><i class="fa fa-long-arrow-right"></i></a></li>`
]]
</ul>
</div>
[[!+page.nav]]
</div>
Причем пробовал разные варианты и rows после - и т.д. ajax работает, но скроллит вверх страницы. Подскажите, в чем может быть проблема, в какой стороне копать?
Решение:Вызываем в шаблоне такой скрипт:
<script type="text/javascript">
pdoPage.callbacks['before'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
pdoPage.callbacks['after'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
</script>
Я не знаю насколько это правильной код, но работает :)
#pdopage — это ID элемента, до которого нужно скроллить страницу
200 — скорость прокрутки
- ВКонтакте
- Telegram
- Viber
- РЎРєРѕРїРСвЂВВВВВВВровать ссылку
2
4 237
0
Комментарии: 11
28 сентября 2015, 11:45
Это нормальное поведение.
Обычным людям неудобно читать новую страницу снизу вверх, поэтому скрипт её прокручивает в начало элемента.
Обычным людям неудобно читать новую страницу снизу вверх, поэтому скрипт её прокручивает в начало элемента.
28 сентября 2015, 11:59
Спасибо за ответ. Василий, подскажите, а есть возможность оставить скролл только до DIV'а с id=«pdopage» и т.п., а не до самого верха страницы? Такая логика есть в скрипте или необходимо вносить изменения?
28 сентября 2015, 12:19
Почитай документацию
Чтобы убрать всё можно сделать просто вот так:
Чтобы убрать всё можно сделать просто вот так:
pdoPage.callbacks['before'] = function(config) {};
pdoPage.callbacks['after'] = function(config) {};
28 сентября 2015, 12:58
Огромное спасибо! Т.к. я ничего не понимаю в программировании, то данные раздел документации я просто упустил :)
Вдруг какому-нибудь чайнику вроде меня это пригодится, делается это вот так:
#pdopage — это ID элемента, до которого нужно скроллить страницу
200 — скорость прокрутки
Вдруг какому-нибудь чайнику вроде меня это пригодится, делается это вот так:
<script type="text/javascript">
pdoPage.callbacks['before'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
pdoPage.callbacks['after'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
</script>
Я не знаю насколько это правильной код, но работает :)#pdopage — это ID элемента, до которого нужно скроллить страницу
200 — скорость прокрутки
17 октября 2015, 09:37
Слушай а у меня после написания данного кода перестал перезагружать страницы. может быть ты сталкивался с этим??
18 октября 2015, 14:58
Не совсем понял вопрос, что значит перестал перезагружать? В AJAX вся фишка в том, что контент подгружается без обновления страницы…
20 октября 2015, 11:25
Ну получается следующий эффект nikandlc.bget.ru/news. Буду держать без изменений что бы вы посмотрели!
25 октября 2015, 23:53
<section id="blog">
<div class="container">
<div class="row">
<!-- === TITLE === -->
<div class="section-title-left col-lg-5 col-md-5 col-sm-5 col-xs-12">
<h2>Blog posts</h2>
</div>
<div class="section-subtitle section-subtitle-right col-lg-7 col-md-7 col-sm-7 col-xs-12">
It has roots in a piece of classical Latin literraturre
</div>
</div>
<!-- === BLOG GRID === -->
<!-- === BLOG ITEM === -->
<div id="pdopage">
<div class="row blog-twocol" id="rows">
[[!pdoPage?
&parents=`8`
&limit=`4`
&ajaxMode=`default`
&tpl=`ListBlogPageTpl`
&includeTVs=`image-blog`
&pageNavVar=`page.nav.blog`
&cache=`1`
&ajaxElemRows=`row blog-twocol`
]]
</div>
[[!+page.nav.blog]]
</div>
</div>
</section>
<script type="text/javascript">
pdoPage.callbacks['before'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
pdoPage.callbacks['after'] = function(config) {$('html, body').stop().animate({scrollLeft: 0, scrollTop:$('#pdopage').offset().top}, 200);};
</script>
ВОТ ТАК.&ajaxElemRows=`row blog-twocol` МЕНЯЙ НЕ МЕНЯЙ, НИ ЧЕГО НЕ ПРОИСХОДИТ
26 октября 2015, 00:07
Без вызова скрипта с callback пагинация работает?
&ajaxElemRows=`row` попробуйте так, либо сделайте rows, как по умолчанию задано
&ajaxElemRows=`row` попробуйте так, либо сделайте rows, как по умолчанию задано
26 октября 2015, 00:40
Все равно не работает. Пусть будет с перезагрузкой(( С аяксом он как то не корректно работает. Там проблема с шаблоном который я купил в темефорест. У меня на странице портфолио тоже ни чего не работало. Я думаю все равно нужно настройки делать, а я пока js учу, не могу ни чего сам делать не понимаю. Через 1-1,5 месяца может быть что то и буду подгонять сам
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Здесь упомянуты:
Компонент | Текущая версия | Закачки |
pdoTools | 2.13.2-pl от 02.09.2021 | 54 258 |
miniShop2 | 4.4.0-pl от 06.08.2024 | 26 389 |
8 часов назад
Здравствуйте
Есть желание использовать компонент polylang для автоматизации перевода с наименьшими усилиями, но есть пару вопросов, которые хотелось ...
Polylang 143
Вчера в 16:30
Добрый день.
Удалите плагин vpSystem от пакета.
[VirtualPage] - Виртуальные страницы. 183
Вчера в 08:40
Хочестя в тикеты при сохранении комментария добавить кнопку «проверить на ошибки» и при нажатии на нее проверить комментарий на ошибки в нейросети сох...
pbStudio: Создаём сайт с PageBlocks – настройка и главная страница 6
Вчера в 08:36
Нет, через апи идет запрос в ChatGPT, который формирует необходимые данные о блоке, а дальше PageBlocks их разбирает и создает все нужные элементы.
PageBlocks 2.6.0. Настройка меню MODX и гибкое управление страницей пользователя 12
Вчера в 00:03
Не работает парсинг с vk.com, vkvideo.ru
[videoGallery] 1.4.0 Поддержка VK Video и ещё пара фишек 9
17 апреля 2025, 23:01
Можете тоже подсказать как победить данную ошибку?
msGallerySearch - загрузка изображений в галерею minishop2 по ссылке и Google поиск картинок 44
17 апреля 2025, 21:35
Действительно! Самого главного я и не обозначил! Спасибо! Поправлю заголовок.
Речь идет именно о панели менеджера и возможности управления заказами.
...
Вывод перечня заказанных товаров в таблицу с заказами minishop2 (панель менеджера) 8
17 апреля 2025, 17:49
Очевидно ты используешь источник файлов, поэтому в админке путь прописан от источника, хочешь полный путь, откажись от источника файлов.
Не открываются загруженные файлы пишет страница не найдена 2
17 апреля 2025, 15:08
Привет, Henk. Спасибо за ответ! В посте по ссылке меня больше всего заинтересовала фраза «мы интегрировали AI в медиа-менеджер, чтобы значительно упро...
MODX/AI Hackathon Part 2 (27 марта) 4
17 апреля 2025, 13:17
в preg_match проверка проходит, и туда 100% приходит url
Здравствуйте! Первый раз такое вижу, у слеша, не 1 символ в строке, а 9!! Как это делает MODX 2