Scroll user to clicked tab on mobile with jquery

Question

I created a tabular system with jquery click for my website on mobile.

Here is the working example with my structure and js code https://jsfiddle.net/anahitdev/6u7s1wa4/

jQuery('.aboutSectionMobileRowReadmoreBtn').each(function(){ 
    jQuery(this).click(function(){
        jQuery('.aboutSectionMobileRow').removeClass('activeAboutMobileSlide');
        jQuery('.aboutSectionMobileRowBottom').slideUp();
        if(!jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').is(':visible')){
            jQuery(this).parent().parent().addClass('activeAboutMobileSlide');
            jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').slideDown('fast', function(){
                jQuery('html, body').stop().animate({
                    scrollTop: jQuery('.aboutSectionMobileRow.activeAboutMobileSlide').find('.aboutSectionMobileRowBottom .aboutSectionIconWrap').offset().top - jQuery('.mobileMenuWrap').outerHeight()
                }, 1000);
            });
        }else{ 
            jQuery('.aboutSectionMobileRow').removeClass('activeAboutMobileSlide');
            jQuery(this).parent().parent().find('.aboutSectionMobileRowBottom').slideUp();
        }  
    });
});

It is not leading to exact scrolling position of clicked/active tab.

Any ideas?

Answer 1

well there are a bunch of problems with your code

the code is very messy and hard to read / understand. i strongly suggest you cache your selectors ( use variables ) . plus the html it's very confusing, a lot of div's and long name classes , It's not optimal to write it like this.

there is no need of an each() method which causes an unnecessary loop

instead of .parent().parent() you can use .parents() because as it says in the DOC's : The .parents() and .parent() methods are similar, except that the latter only travels a single level up the DOM tree

anyway, i changed a bit your code and now it's working as you want. check it out below in snippet or in jsFiddle

 var readmore = $('.aboutSectionMobileRowReadmoreBtn'), menuHeight = $(".mobileMenuWrap").outerHeight() $(readmore).on("click", function() { var thisParent = $(this).parents(".aboutSectionMobileRow"), thisText = $(thisParent).find('.aboutSectionMobileRowBottom'), scrollTo = $(thisParent).offset().top - menuHeight $(thisParent).removeClass('activeAboutMobileSlide'); $(thisText).slideUp(); if (!$(thisText).is(':visible')) { $(thisParent).addClass('activeAboutMobileSlide'); $(thisText).slideDown('fast') $('html, body').animate({ scrollTop: scrollTo }, 1000); } else { $(thisParent).removeClass('activeAboutMobileSlide'); $(thisText).slideUp(); } }); 

 .mobileMenuWrap { display: block; width: 100%; float: left; padding: 8px 0; position: fixed; top: 0; z-index: 50; min-height: 50px; } .mobileMenuBg { position: absolute; width: 100%; height: 100%; background: #1b1b2d; top: 0; left: 0; opacity: 0.9; } .mobileMenuInner { width: 90%; display: table; margin: auto; position: relative; } .aboutSectionMobileRows { display: block; width: 100%; float: left; padding: 66px 0; } .aboutSectionMobileRow { width: 100%; float: left; border-bottom: 2px solid #464667; padding: 14px 0; } .aboutSectionMobileRow:first-child { padding-top: 0; } .aboutSectionMobileRowTop { float: left; width: 100%; } .aboutSectionMobileRowTitle { width: 60%; float: left; line-height: 20px; margin: 0; text-align: left; font-family: 'kontrapunktbold'; font-size: 20px; color: #ec3d5c; text-transform: uppercase; } .aboutSectionMobileRowReadmoreBtn { width: 29%; float: right; border: 1px solid #000; border-radius: 40px; padding: 11px 0; text-align: center; text-decoration: none; cursor: pointer; position: relative; z-index: 1; } .aboutSectionMobileRowReadmoreBtnTextWrap { width: 65%; float: none; display: table; margin: auto; } .aboutSectionMobileRowReadmoreBtnText { text-transform: uppercase; color: #000; font-family: 'kontrapunktbold'; font-size: 12px; float: left; } .aboutSectionMobileRowAnimatedPoligonWrap { float: right; margin: 3px 0 0 0; position: relative; } .iosDevice .aboutSectionMobileRowAnimatedPoligonWrap { margin: 4px 0 0 0; } .aboutSectionMobileRowAnimatedPoligonLine { width: 24px; height: 1px; background: #fff; float: left; margin: 4px 0 0 0; } .aboutSectionMobileRowAnimatedPoligon { width: 9px; height: 8px; background: url(images/button_hexagon_white.svg) no-repeat; background-size: 100%; position: absolute; left: 17px; transition: all 1s ease-in; -webkit-transition: all 1s ease-in; -moz-transition: all 1s ease-in; -o-transition: all 1s ease-in; -ms-transition: all 1s ease-in; } .aboutSectionMobileRowReadmoreBtn:hover .aboutSectionMobileRowAnimatedPoligon { -webkit-animation: color-me-in 1s; -moz-animation: color-me-in 1s; -ms-animation: color-me-in 1s; -o-animation: color-me-in 1s; animation: color-me-in 1s; } .aboutSectionMobileRowBottom { width: 100%; float: left; padding: 20px 0; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="mobileMenuWrap"> <div class="mobileMenuBg"></div> <div class="mobileMenuInner"> <div class="mobileMenuBtn"> <span></span> <span></span> <span></span> </div> <div class="mobileMenuLogo"> <a href="#"></a> </div> </div> </div> <div class="aboutSectionMobileRows"> <div class="aboutSectionMobileRow"> <div class="aboutSectionMobileRowTop"> <h4 class="aboutSectionMobileRowTitle">Who are We</h4> <a class="aboutSectionMobileRowReadmoreBtn"> <span class="aboutSectionMobileRowReadmoreBtnTextWrap"> <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> <span class="aboutSectionMobileRowAnimatedPoligonWrap"> <span class="aboutSectionMobileRowAnimatedPoligonLine"></span> <span class="aboutSectionMobileRowAnimatedPoligon"></span> </span> </span> </a> </div> <div class="aboutSectionMobileRowBottom"> <div class="aboutSectionIconWrap"> <div class="aboutSectionMobileAnimatedFigure"> <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/Desk_500x500_48frames.png');background-size:100%;"></div> </div> </div> <div class="aboutSectionMobileTextWrap"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> <div class="aboutSectionMobileRow"> <div class="aboutSectionMobileRowTop"> <h4 class="aboutSectionMobileRowTitle">Our Vision</h4> <a class="aboutSectionMobileRowReadmoreBtn"> <span class="aboutSectionMobileRowReadmoreBtnTextWrap"> <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> <span class="aboutSectionMobileRowAnimatedPoligonWrap"> <span class="aboutSectionMobileRowAnimatedPoligonLine"></span> <span class="aboutSectionMobileRowAnimatedPoligon"></span> </span> </span> </a> </div> <div class="aboutSectionMobileRowBottom"> <div class="aboutSectionIconWrap"> <div class="aboutSectionMobileAnimatedFigure"> <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/spider_49_500-min.png');background-size:100%;"></div> </div> </div> <div class="aboutSectionMobileTextWrap"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> <div class="aboutSectionMobileRow"> <div class="aboutSectionMobileRowTop"> <h4 class="aboutSectionMobileRowTitle">Our History</h4> <a class="aboutSectionMobileRowReadmoreBtn"> <span class="aboutSectionMobileRowReadmoreBtnTextWrap"> <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> <span class="aboutSectionMobileRowAnimatedPoligonWrap"> <span class="aboutSectionMobileRowAnimatedPoligonLine"></span> <span class="aboutSectionMobileRowAnimatedPoligon"></span> </span> </span> </a> </div> <div class="aboutSectionMobileRowBottom"> <div class="aboutSectionIconWrap"> <div class="aboutSectionMobileAnimatedFigure"> <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/Book_500x500_72-min.png');background-size:100%;"></div> </div> </div> <div class="aboutSectionMobileTextWrap"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> <div class="aboutSectionMobileRow"> <div class="aboutSectionMobileRowTop"> <h4 class="aboutSectionMobileRowTitle">Why Work With Us</h4> <a class="aboutSectionMobileRowReadmoreBtn"> <span class="aboutSectionMobileRowReadmoreBtnTextWrap"> <span class="aboutSectionMobileRowReadmoreBtnText">Read More</span> <span class="aboutSectionMobileRowAnimatedPoligonWrap"> <span class="aboutSectionMobileRowAnimatedPoligonLine"></span> <span class="aboutSectionMobileRowAnimatedPoligon"></span> </span> </span> </a> </div> <div class="aboutSectionMobileRowBottom"> <div class="aboutSectionIconWrap"> <div class="aboutSectionMobileAnimatedFigure"> <div class="aboutSLideAnimatedMobileArea" style="background:url('http://imaginawp.ipoint.com.mt/wp-content/uploads/hi5_48_450-min.png');background-size:100%;"></div> </div> </div> <div class="aboutSectionMobileTextWrap"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p> </div> </div> </div> </div>