How to reset scroll position in div using javascript

Question

I am working on a mobile hybrid application.

On my HTML page, I have 3 tabs. When you click on a tab, the contents of the scrollable div element changes. My problem is that when I scroll through the contents of a div (view) and click on another tab, the content disappears (but the content is there). Please help me so that I can reset the scroll position of the div when clicking on any tab.

Please give me suggestions only with JavaScript or CSS, not with jQuery, since I do not use the jQuery library.

Answer 1

Finally it worked for me

function resetScrollPos(selector) { var divs = document.querySelectorAll(selector); for (var p = 0; p < divs.length; p++) { if (Boolean(divs[p].style.transform)) { //for IE(10) and firefox divs[p].style.transform = 'translate3d(0px, 0px, 0px)'; } else { //for chrome and safari divs[p].style['-webkit-transform'] = 'translate3d(0px, 0px, 0px)'; } } } resetScrollPos('.mblScrollableViewContainer'); 

Calling this function after switching between views will reset my scroll position.

Answer 2

Without seeing the code, I can only guess. If you want to reset the scroll position, you can simply use

 window.scrollTo(0,0); 

add this code to each function of clicking on a tab, so that when you click on any tab, it will be reset up.

If you have a specific div that has an overflow property

 var myDiv = document.getElementById('specificDiv'); myDiv.scrollTop = 0; 

Answer 3

Easy

  <div id="test" style="height:150px; width:600px;overflow-y:auto;background-color:gray;"> <div style="width:150px;height:500px; background-color:green;"></div> </div> 

 document.getElementById('test').scrollTop =0;