H
H
happinet2018-08-23 12:30:51
JavaScript
happinet, 2018-08-23 12:30:51

How to make it work normally scroll to the anchor in the tabs?

Has tabs/tabs

<ul class="porfolio-group">
<li class="col-sm-12 col-md-3 text-center block-text-bottom portfolio-block">
 				<a class="content-link" href="#flat" aria-controls="flat" role="tab" data-toggle="tab">
 					<img src="<?php blogInfo('template_directory') ?>/images/foto-9.jpg" style="display: block; width: 100%;" alt="" />
 					<p>Квартиры</p>
 				</a>
 				
 			</li>
 			<li class="col-sm-12 col-md-3 text-center block-text-bottom portfolio-block">
 				<a class="content-link" href="#publicplace" aria-controls="publicplace" role="tab" data-toggle="tab">
 					<img src="<?php blogInfo('template_directory') ?>/images/foto-10.jpg" style="display: block; width: 100%;" alt="" />
 					<p>Общественные помещения</p>
 				</a>
 				
 			</li>
</ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in" id="flat">
<?php
global $post;
$args = array('category' => 10, 'post_type'=>'page', 'numberposts'=> -1, );
$myposts = get_posts( $args );
foreach( $myposts as $post ){ setup_postdata($post);
  ?>
  <div class="col-sm-12 col-md-4 portfolio-item-gallery-zoom"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $page->ID); ?><span><?php the_title(); ?></span></a></div>
  <?php
}

?>

 		</div>	
 		<div role="tabpanel" class="tab-pane fade in" id="publicplace">
      <?php
global $post;
$args = array('category' => 11, 'post_type'=>'page', 'numberposts'=> -1, );
$myposts = get_posts( $args );
foreach( $myposts as $post ){ setup_postdata($post);
  ?>
  <div class="col-sm-12 col-md-4 portfolio-item-gallery-zoom"><a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $page->ID); ?><span><?php the_title(); ?></span></a></div>
  <?php
}

?>
      
 		</div>	
</div>


Tabs work through Bootstrap.

There is js that when you click on a link/tab, it scrolls to the anchor/content in the tabs

$(function() {
  $("a.content-link").click(function(e) {
    e.preventDefault()
    $(this).tab('show')
    var _href = $(this).attr("href");
    $("html, body").animate({
      scrollTop: $(_href).offset().top + "px"
    });
    return false;
  });
});


The problem is that when you first click on the tab link, everything works fine: the content opens, scrolls to the anchor... but when you click on another tab, it scrolls up to the beginning of the site, on the second click, it scrolls to the anchor again.

How can I prevent scrolling to the top of the site?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question