Скроллит страницу вверх при ajax пагинации pdoPage

Добрый день!

Ребята, столкнулся с такой проблемой — при выводе товаров 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 после

Решение:

<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 — скорость прокрутки

Victor

18 октября 2015, 12:11

ВКонтакте

4 232

Комментарии: 11

Василий Наумкин

28 сентября 2015, 11:45

Это нормальное поведение.

Обычным людям неудобно читать новую страницу снизу вверх, поэтому скрипт её прокручивает в начало элемента.

Victor

28 сентября 2015, 11:59

Спасибо за ответ. Василий, подскажите, а есть возможность оставить скролл только до DIV'а с id=«pdopage» и т.п., а не до самого верха страницы? Такая логика есть в скрипте или необходимо вносить изменения?

Василий Наумкин

28 сентября 2015, 12:19

Почитай документацию

Чтобы убрать всё можно сделать просто вот так:

pdoPage.callbacks['before'] = function(config) {};
pdoPage.callbacks['after'] = function(config) {};

Victor

28 сентября 2015, 12:58

Огромное спасибо! Т.к. я ничего не понимаю в программировании, то данные раздел документации я просто упустил :)

Вдруг какому-нибудь чайнику вроде меня это пригодится, делается это вот так:

<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

Слушай а у меня после написания данного кода перестал перезагружать страницы. может быть ты сталкивался с этим??

Victor

18 октября 2015, 14:58

Не совсем понял вопрос, что значит перестал перезагружать? В AJAX вся фишка в том, что контент подгружается без обновления страницы…

Сергей

20 октября 2015, 11:25

Ну получается следующий эффект nikandlc.bget.ru/news. Буду держать без изменений что бы вы посмотрели!

Victor

22 октября 2015, 11:11

А сам pdoPage как вызываете?

Сергей

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` МЕНЯЙ НЕ МЕНЯЙ, НИ ЧЕГО НЕ ПРОИСХОДИТ

Victor

26 октября 2015, 00:07

Без вызова скрипта с callback пагинация работает?
&ajaxElemRows=`row` попробуйте так, либо сделайте rows, как по умолчанию задано

Сергей

26 октября 2015, 00:40

Все равно не работает. Пусть будет с перезагрузкой(( С аяксом он как то не корректно работает. Там проблема с шаблоном который я купил в темефорест. У меня на странице портфолио тоже ни чего не работало. Я думаю все равно нужно настройки делать, а я пока js учу, не могу ни чего сам делать не понимаю. Через 1-1,5 месяца может быть что то и буду подгонять сам

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.