Плавная прокрутка вверх страницы после нажатия на ajax пагинацию jQuery

Question

Есть сайт на WordPress. Я вывожу записи при помощи WP_Query. При нажатии на кнопку пагинации у меня через ajax меняется контент без перезагрузки страницы. Подскажите пожалуйста, как нужно изменить js код, что бы после нажатия на ссылку пагинации был плавный переход (поднимало в вверх) к началу блока <div id="content"> или в самый верх страницы?

<div id="content">
  <div id="main">
    <ul>

      <?php
      $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
        $args = array(
         'post_type' => 'post',
         'posts_per_page' => 8,
         'paged'          => $paged,
         'tax_query' => array(             
                    array(
                      'taxonomy' => 'category',
                      'field' => 'id',
                      'terms' => 1
                         ),
             )
             );
             $query = new WP_Query($args);

            if ($query->have_posts()) {
            while ($query->have_posts()) {
            $query->the_post();
        ?>

        <li>
            <div>
                <?php the_title(); ?>
            </div>
        </li>

        <?php
         }
        }
        wp_reset_postdata();
        ?>
    </ul>

  </div>
</div>


    /*******ajax pagination*******/
jQuery(document).on('click', '#pagination a', function(e){  
  e.preventDefault();  
  var link = jQuery(this).attr('href');  
  jQuery('#content').html('Загрузка...');  //the 'main' div is inside the 'content' div
  jQuery('#content').load(link+' #main');
});

Answer 1

jQuery(document).on('click', '#pagination a', function(e) {
  e.preventDefault();
  var link = jQuery(this).attr('href');
  //let href = $(this).attr('href');
  jQuery('#content').html('Загрузка...');
  jQuery('#content').load(link + ' #main');
  $('html,body').animate({
    scrollTop: $('#content').offset().top + "px"
  }, {
    duration: 800,
    easing: "linear"
  });
});

.header {
  border: 2px solid blue;
  height: 30vh;
  margin-bottom: 5px;
}

#content {
  border: 2px solid gray;
  height: 200vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">header</div>
<div id="content">
  <div id="main">
    <ul>

      <?php
      $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
        $args = array(
         'post_type' => 'post',
         'posts_per_page' => 8,
         'paged'          => $paged,
         'tax_query' => array(             
                    array(
                      'taxonomy' => 'category',
                      'field' => 'id',
                      'terms' => 1
                         ),
             )
             );
             $query = new WP_Query($args);

            if ($query->have_posts()) {
            while ($query->have_posts()) {
            $query->the_post();
        ?>

        <li>
          <div>
            <?php the_title(); ?>
          </div>
        </li>

        <?php
         }
        }
        wp_reset_postdata();
        ?>
    </ul>

  </div>
</div>

<div id="pagination"><a href="#">Страница 1</a></div>

БЛОГ НА HUSL

Плавная прокрутка вверх страницы после нажатия на ajax пагинацию jQuery

Ответы (1 шт):