Скроллит страницу вверх при 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 после
    и т.д. 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 — скорость прокрутки
Victor
Victor
18 октября 2015, 12:11
modx.pro
2
4 154
0

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

Василий Наумкин
Василий Наумкин
28 сентября 2015, 11:45
0
Это нормальное поведение.

Обычным людям неудобно читать новую страницу снизу вверх, поэтому скрипт её прокручивает в начало элемента.
    Victor
    Victor
    28 сентября 2015, 11:59
    0
    Спасибо за ответ. Василий, подскажите, а есть возможность оставить скролл только до DIV'а с id=«pdopage» и т.п., а не до самого верха страницы? Такая логика есть в скрипте или необходимо вносить изменения?
      Василий Наумкин
      Василий Наумкин
      28 сентября 2015, 12:19
      0
      Почитай документацию

      Чтобы убрать всё можно сделать просто вот так:
      pdoPage.callbacks['before'] = function(config) {};
pdoPage.callbacks['after'] = function(config) {};
        Victor
        Victor
        28 сентября 2015, 12:58
        +1
        Огромное спасибо! Т.к. я ничего не понимаю в программировании, то данные раздел документации я просто упустил :)

        Вдруг какому-нибудь чайнику вроде меня это пригодится, делается это вот так:
        <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
    0
    Слушай а у меня после написания данного кода перестал перезагружать страницы. может быть ты сталкивался с этим??
      Victor
      Victor
      18 октября 2015, 14:58
      0
      Не совсем понял вопрос, что значит перестал перезагружать? В AJAX вся фишка в том, что контент подгружается без обновления страницы…
        Сергей
        Сергей
        20 октября 2015, 11:25
        0
        Ну получается следующий эффект nikandlc.bget.ru/news. Буду держать без изменений что бы вы посмотрели!
          Victor
          Victor
          22 октября 2015, 11:11
          +1
          А сам pdoPage как вызываете?
            Сергей
            Сергей
            25 октября 2015, 23:53
            0 
            <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
              Victor
              26 октября 2015, 00:07
              +1
              Без вызова скрипта с callback пагинация работает?
              &ajaxElemRows=`row` попробуйте так, либо сделайте rows, как по умолчанию задано
                Сергей
                Сергей
                26 октября 2015, 00:40
                0
                Все равно не работает. Пусть будет с перезагрузкой(( С аяксом он как то не корректно работает. Там проблема с шаблоном который я купил в темефорест. У меня на странице портфолио тоже ни чего не работало. Я думаю все равно нужно настройки делать, а я пока js учу, не могу ни чего сам делать не понимаю. Через 1-1,5 месяца может быть что то и буду подгонять сам
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      11