How to reset scroll to the top of the grid using Protractor

Question

I am scrolling through the grid multiple times based on the number of rows in the grid using the last Row of the visible rows.

How can I reset the scroll to the top of the grid? Do I need to do it multiple times to reach the top of the grid or is there a simple way to reset the scroll?

I tried with (0,0) co-ordinates but it didn't work.

HTML Before Scrolling

<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;">
<div class="ag-pinned-left-cols-viewport" style="display: inline; height: 552px;">
<div class="ag-pinned-right-cols-viewport" style="display: none; height: 552px;">
<div class="ag-body-viewport-wrapper" style="margin-left: 480px; margin-right: 0px;">
<div class="ag-body-viewport" style="overflow-y: auto;">
<div class="ag-body-container" style="width: 1415px; height: 1830px;">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-117 ag-row-index-16" style=" top: 480px; height: 30px;" row-id="117" row="16" v_element_id="374">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-118 ag-row-index-17" style=" top: 510px; height: 30px;" row-id="118" row="17" v_element_id="391">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-119 ag-row-index-18" style=" top: 540px; height: 30px;" row-id="119" row="18" v_element_id="408">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-120 ag-row-index-19" style=" top: 570px; height: 30px;" row-id="120" row="19" v_element_id="425">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-121 ag-row-index-20" style=" top: 600px; height: 30px;" row-id="121" row="20" v_element_id="442">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-116 ag-row-index-15" style=" top: 450px; height: 30px;" row-id="116" row="15" v_element_id="1968">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-115 ag-row-index-14" style=" top: 420px; height: 30px;" row-id="115" row="14" v_element_id="2070">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-114 ag-row-index-13" style=" top: 390px; height: 30px;" row-id="114" row="13" v_element_id="2087">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-113 ag-row-index-12" style=" top: 360px; height: 30px;" row-id="113" row="12" v_element_id="2104">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-112 ag-row-index-11" style=" top: 330px; height: 30px;" row-id="112" row="11" v_element_id="2121">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-111 ag-row-index-10" style=" top: 300px; height: 30px;" row-id="111" row="10" v_element_id="2138">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-110 ag-row-index-9" style=" top: 270px; height: 30px;" row-id="110" row="9" v_element_id="2155">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-109 ag-row-index-8" style=" top: 240px; height: 30px;" row-id="109" row="8" v_element_id="2172">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-108 ag-row-index-7" style=" top: 210px; height: 30px;" row-id="108" row="7" v_element_id="2189">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-106 ag-row-index-5" style=" top: 150px; height: 30px;" row-id="106" row="5" v_element_id="2206">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-107 ag-row-index-6" style=" top: 180px; height: 30px;" row-id="107" row="6" v_element_id="2223">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-105 ag-row-index-4" style=" top: 120px; height: 30px;" row-id="105" row="4" v_element_id="2240">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-104 ag-row-index-3" style=" top: 90px; height: 30px;" row-id="104" row="3" v_element_id="2257">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-103 ag-row-index-2" style=" top: 60px; height: 30px;" row-id="103" row="2" v_element_id="2274">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-102 ag-row-index-1" style=" top: 30px; height: 30px;" row-id="102" row="1" v_element_id="2291">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-101 ag-row-index-0" style=" top: 0px; height: 30px;" row-id="101" row="0" v_element_id="2308">
</div>
</div>
</div>

HTML After Scrolling

<div class="ag-body" style="padding-top: 25px; padding-bottom: 30px;">
<div class="ag-pinned-left-cols-viewport" style="display: inline; height: 552px;">
<div class="ag-pinned-right-cols-viewport" style="display: none; height: 552px;">
<div class="ag-body-viewport-wrapper" style="margin-left: 480px; margin-right: 0px;">
<div class="ag-body-viewport" style="overflow-y: auto;">
<div class="ag-body-container" style="width: 1415px; height: 1830px;">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-117 ag-row-index-16" style=" top: 480px; height: 30px;" row-id="117" row="16" v_element_id="374">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-118 ag-row-index-17" style=" top: 510px; height: 30px;" row-id="118" row="17" v_element_id="391">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-119 ag-row-index-18" style=" top: 540px; height: 30px;" row-id="119" row="18" v_element_id="408">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-120 ag-row-index-19" style=" top: 570px; height: 30px;" row-id="120" row="19" v_element_id="425">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-121 ag-row-index-20" style=" top: 600px; height: 30px;" row-id="121" row="20" v_element_id="442">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-122 ag-row-index-21" style=" top: 630px; height: 30px;" row-id="122" row="21" v_element_id="1611">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-123 ag-row-index-22" style=" top: 660px; height: 30px;" row-id="123" row="22" v_element_id="1662">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-124 ag-row-index-23" style=" top: 690px; height: 30px;" row-id="124" row="23" v_element_id="1679">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-125 ag-row-index-24" style=" top: 720px; height: 30px;" row-id="125" row="24" v_element_id="1696">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-126 ag-row-index-25" style=" top: 750px; height: 30px;" row-id="126" row="25" v_element_id="1713">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-127 ag-row-index-26" style=" top: 780px; height: 30px;" row-id="127" row="26" v_element_id="1730">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-128 ag-row-index-27" style=" top: 810px; height: 30px;" row-id="128" row="27" v_element_id="1747">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-129 ag-row-index-28" style=" top: 840px; height: 30px;" row-id="129" row="28" v_element_id="1764">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-130 ag-row-index-29" style=" top: 870px; height: 30px;" row-id="130" row="29" v_element_id="1781">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-131 ag-row-index-30" style=" top: 900px; height: 30px;" row-id="131" row="30" v_element_id="1798">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-132 ag-row-index-31" style=" top: 930px; height: 30px;" row-id="132" row="31" v_element_id="1815">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-133 ag-row-index-32" style=" top: 960px; height: 30px;" row-id="133" row="32" v_element_id="1832">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-134 ag-row-index-33" style=" top: 990px; height: 30px;" row-id="134" row="33" v_element_id="1849">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-135 ag-row-index-34" style=" top: 1020px; height: 30px;" row-id="135" row="34" v_element_id="1866">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-136 ag-row-index-35" style=" top: 1050px; height: 30px;" row-id="136" row="35" v_element_id="1883">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-116 ag-row-index-15" style=" top: 450px; height: 30px;" row-id="116" row="15" v_element_id="1968">
<div class="ag-row ag-row-no-focus ag-row-even ag-row-level-0 ag-row-id-137 ag-row-index-36" style=" top: 1080px; height: 30px;" row-id="137" row="36" v_element_id="2036">
<div class="ag-row ag-row-no-focus ag-row-odd ag-row-level-0 ag-row-id-202 ag-row-index-37" style=" top: 1110px; height: 30px;" row-id="202" row="37" v_element_id="2053">
</div>
</div>
</div>

Answer 1

You could call .scrollTo(0, 0) on the scrollable container. It seems to be .ag-body-viewport in your HTML:

browser.executeScript("document.querySelector('.ag-body-viewport').scrollTo(0, 0);");

Answer 2

You can do a Scroll up using,

jse.executeScript("window.scrollBy(0,-250)", "");

OR

jse.executeScript("scroll(0, -250);");

Hope this helps. :)

Answer 3

You would want to do var element.scrollTop = 0; where element is your container where scroll is there