Scroll to top of jQuery-Textarea

Question

I'm trying to add a "change log" to my jQuery mobile Application. In case of an error, the user should have the capability, to see what went wrong. Therefor I've implemented a popup, with a textarea (see code below)

        <!-- DIALOG Start-->
        <div data-role="popup" id="popupLog" data-overlay-theme="a" data-theme="b" style="max-width:400px;" class="ui-corner-all">
        <div data-role="header" data-theme="b" class="ui-corner-top">
        <h1>Logg-Einträge:</h1>
        </div>
        <div data-role="none" data-theme="b" class="ui-corner-bottom ui-content">
        <textarea style="height: 120px; max-height: 120px" readonly="readonly" data-mini="true" cols="40" rows="8" id="popupTextArea"></textarea>
        <a href="#" data-role="button" data-inline="true" id="btn_textArea" data-rel="back" data-theme="c">OK</a>    
        </div>
        </div>
        <!-- DIALOG End-->

This popUp is filled with data, and opened when clicking a specific button:

$('#showLog').click(function() {
    $("#popupDialog").popup("close");
    // populate the textArea with the text
    $("#popupTextArea").text(sessionStorage.getItem("logStack"));
    // open popUp after a specific time
     setTimeout( function(){$('#popupLog').popup('open'); 
         }, 1000 );
});

All functionalities are working fine up to this point. The problem is: When the user scrolls down within the textarea, closes the popUp and re-open it, the position of the scroller is still the same - for example the user scrolls down to the bottom, closes the popUp and reopens it - the popUp will be at the bottom of the textarea again. But i'd like to get allways the top of the textarea, when the popUp is opened again. For realizing this, I've implemented an "Ok"-Button in this popUp as follows, which closes the popUp and set the scrollingTop to 0:

$('#btn_textArea').click(function() {
// Setting position of the textArea to "0" -> But doesn't work.....
     $('#popupTextArea').scrollTop(0);
     );
});

I'm struggeling at this point, because the appearance of the textArea is still the same. Do I need a refresh or something? I would be very grateful for every help....

Answer 1

You could use the popupbeforeposition event to manipulate the scrollTop property of the textarea:

$(document).ready(function(){

    $("#exampleWindow").on("popupbeforeposition", function(evt, ui){

        $(this).find("textarea").scrollTop(0);

    });

});

Here you have a snippet with an example, test to close and open the popup after making scroll on the textarea:

$(document).ready(function() {

  $("#exampleWindow").on("popupbeforeposition", function(evt, ui) {
    $(this).find("textarea").scrollTop(0);
  });

});

textarea {
  max-height: 100px;
}

<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.css">

<div data-role="popup" id="exampleWindow" data-theme="a" class="ui-corner-all" data-history="false">
  <div style="padding:0px 20px 10px 20px;" align="center">
    <h3>Example</h3>
    <textarea class="enableSelect" cols="40" rows="15" name="mytext" id="mytext" style="resize: vertical">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec quam consectetur, molestie sapien quis, fringilla felis. Vestibulum quam turpis, eleifend vel efficitur vel, pharetra eget lorem. In hac habitasse platea dictumst. Aliquam tincidunt massa vel maximus fermentum. Integer non velit arcu. Curabitur ultricies tincidunt nisi ultrices faucibus. Ut a purus dignissim, varius nisl vitae, ultricies dolor. Integer eget nisi sed ligula imperdiet accumsan ac eget lectus. Curabitur eu lacinia nunc, ac condimentum nunc. Etiam sit amet nulla massa. Etiam porta tortor ac sapien scelerisque, ac posuere mauris lacinia. Morbi id vestibulum nisl. Praesent dolor libero, bibendum quis molestie sit amet, posuere quis mi. Etiam scelerisque porttitor sem id vestibulum. Nullam nec suscipit arcu. Aenean semper in lorem eget aliquet.</textarea>
  </div>
</div>

<a id="openExampleWindow" href="#exampleWindow" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-icon="check" data-theme="a" data-transition="pop">Open popup</a>

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.js"></script>