I have an accordion in the page, while I click on the accordion, I like my screen move and scroll to the top of accordion title. The structure of accordion is like this:
<section id="owners-content" class="faq-section flex-container">
<h2 class="heading-4 centered large-col-8 medium-col-10 small-col-4 ">"My XYZ" Owner's Info</h2>
<div class="accordion-container flex-container ng-scope" role="tablist" aria-live="polite" data-ng-controller="tciAccordionController">
<div role="tabpanel" class="accordion" data-tci-accordion="" data-tci-accordion-event-category="faq_expan_">
<ul>
<li class="item flex-container " data-item-id="0" data-label="how_do_i_access_club_toyota">
<div class="centered large-col-8 medium-col-10 small-col-4 phone-col-4">
<button class="accordion-toggle ng-scope" aria-pressed="false" aria-label="How do I access Club XYZ?" data-ng-click="vm.toggle(0)">
<h4 class="accordion-header">
How do I access Club XYZ?
<span class="accordion-arrow" data-index="0">
<svg version="1.1" class="svg-arrow-container" role="img" aria-label="arrow" color-interpolation="auto" shape-rendering="auto" image-rendering="auto" text-rendering="auto" color-rendering="auto" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-157 170.1 83.5 61.9" style="enable-background:new -157 170.1 83.5 61.9;" xml:space="preserve">
<path role="presentation" class="st3 svg-arrow faq" d="M-77.2,204.8l-30.2-30.8c-0.3-0.3-0.5-0.6-0.8-0.9l-0.3-0.3c-3-2.9-7.5-3.5-11-1.7l0,0
c-0.2,0.1-0.3,0.2-0.5,0.3c-0.1,0.1-0.3,0.2-0.4,0.2l-0.1,0.1c-0.5,0.3-0.9,0.7-1.3,1.1l-0.4,0.3c-0.2,0.2-0.3,0.3-0.5,0.5
l-30.6,31.1c-3.7,3.7-3.6,9.8,0.1,13.4l0.3,0.3c3.7,3.7,9.8,3.6,13.4-0.1l24.3-24.5l24.2,24.6c3.7,3.7,9.7,3.8,13.4,0.1l0.3-0.3
C-73.6,214.5-73.5,208.5-77.2,204.8z">
</path>
</svg>
</span>
</h4>
</button>
<div class="accordion-content " aria-hidden="true">
<div class="inner">
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p>
</div>
</div>
</div>
</li>
<li class="item flex-container " data-item-id="1" data-label="what_is_the_vehicle_identification_number"> similar repeating list ....
The approach that I used was
angular.element(document).scrollTop(angular.element($content.parent().parent().parent().parent().parent().parent()).prop('offsetTop') + id * item.clientHeight);
Which is big no no in the team. Is there any better css was to get that grand gran parent from the clicked element?
Since .closest() isn't available, you could make your own:
angular.element.closest = function(a, b) {
for (var c = b.charAt(0); a && a !== document; a = a.parentNode)
if ("." === c && a.classList.contains(b.substr(1)) || "#" === c && a.id === b.substr(1) || "[" === c && a.hasAttribute(b.substr(1, b.length - 2)) || a.tagName.toLowerCase() === b) return a;
return !1
};
Then use as simple as:
angular.element('selector').closest('selector')