Javascript to scroll content back to top</a></h1> </div> <div class="grid fw-wrap pb8 mb16 bb bc-black-075"> <div class="grid--cell ws-nowrap mr16 mb8" title="2016-01-12 19:07:53Z"> <span class="fc-light mr2">Asked</span> <time itemprop="dateCreated" datetime="2017-12-24T06:44:47.167" class="fromnow">Dec 24 '17 at 06:44</time> </div> <div class="grid--cell ws-nowrap mr16 mb8"> <span class="fc-light mr2">Active</span> <time class="fromnow" title="2017-12-24T07:25:52.240" datetime="2017-12-24T07:25:52.240">Dec 24 '17 at 07:25</a> </div> <div class="grid--cell ws-nowrap mb8" title="Viewed 6,418 times"> <span class="fc-light mr2">Viewed</span> 6,418 times </div> </div> <div id="mainbar" role="main" aria-label="questions and answers"> <div id="question" class="question" data-questionid="47958600" data-ownerid="5008955" data-score="9"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="47958600"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="9">9</div> <button class="js-bookmark-btn s-btn s-btnunset c-pointer py4"> <svg aria-hidden="true" class="svg-icon iconBookmark" width="18" height="18" viewBox="0 0 18 18"><path d="M6 1a2 2 0 00-2 2v14l5-4 5 4V3a2 2 0 00-2-2H6zm3.9 3.83h2.9l-2.35 1.7.9 2.77L9 7.59l-2.35 1.7.9-2.76-2.35-1.7h2.9L9 2.06l.9 2.77z"></path></svg> <div class="js-bookmark-count mt4" data-value=""></div> </button> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>I want the following code, changed so that on button press, it scrolls the text area content from bottom to top.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").on("click", function() { $(document).ready(function() { var $textarea = $('#update'); $textarea.scrollTop($textarea[0].scrollHeight); }); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Scroll</button> <textarea Name="update" Id="update" cols="50" rows="25"></textarea></code></pre> </div> </div> </div> <div class="mt24 mb12"> <div class="post-taglist grid gs4 gsy fd-column"> <div class="grid ps-relative"> <a href="../../questions/tagged/javascript" class="post-tag js-gps-track" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/jquery" class="post-tag js-gps-track" title="show questions tagged 'jquery'" rel="tag">jquery</a> <a href="../../questions/tagged/html" class="post-tag js-gps-track" title="show questions tagged 'html'" rel="tag">html</a> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Dec 24 '17 at 06:58">edited Dec 24 '17 at 06:58</time> <a href="../../users/4540183/pedram" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4540183.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pedram" /> </a> <div class="s-user-card--info"> <a href="../../users/4540183/pedram" class="s-user-card--link">Pedram</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">15,766</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="44 silver badges">44</li> <li class="s-award-bling s-award-blingbronze" title="73 bronze badges">73</li> </ul> </div> </div> </div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Dec 24 '17 at 06:44">asked Dec 24 '17 at 06:44</time> <a href="../../users/5008955/cody-coderson" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5008955.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Cody Coderson" /> </a> <div class="s-user-card--info"> <a href="../../users/5008955/cody-coderson" class="s-user-card--link">Cody Coderson</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">411</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="9 silver badge">9</li> <li class="s-award-bling s-award-blingbronze" title="21 bronze badge">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-47958600" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="47958600" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-82886501" class="comment js-comment " data-comment-id="82886501" data-comment-owner-id="4540183" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment82886501_47958600"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">[Scroll to top of jQuery-Textarea](https://stackoverflow.com/questions/16673159/scroll-to-top-of-jquery-textarea) | Just change `$textarea.scrollTop($textarea[0].scrollHeight);` => `$textarea.scrollTop(0);`</span> – <a href="../../users/4540183/pedram" title="15,766 reputation" class="comment-user ">Pedram</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/47958600/javascript-to-scroll-textarea-content-back-to-top#comment82886501_47958600"><span title="2017-12-24T06:47:21.030 License: CC BY-SA 3.0" class="relativetime-clean">Dec 24 '17 at 06:47</span></a></span> </div> </div> </li> <li id="comment-82886523" class="comment js-comment " data-comment-id="82886523" data-comment-owner-id="4540183" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment82886523_47958600"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Do not put `document.ready` inside a `click` function!</span> – <a href="../../users/4540183/pedram" title="15,766 reputation" class="comment-user ">Pedram</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/47958600/javascript-to-scroll-textarea-content-back-to-top#comment82886523_47958600"><span title="2017-12-24T06:49:48.593 License: CC BY-SA 3.0" class="relativetime-clean">Dec 24 '17 at 06:49</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <div id="answers"> <a name="tab-top"></a> <div id="answers-header"> <div class="answers-subheader grid ai-center mb8"> <div class="grid--cell fl1"> <h2 class="mb0" data-answercount="9">4 Answers<span style="display:none;" itemprop="answerCount">4</span></h2> </div> </div> </div> <a name="47958634"></a> <div id="answer-47958634" class="answer " data-answerid="47958634" data-ownerid="4940910" data-score="12" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="47958634"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="12">12</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Change the following line <code>$textarea.scrollTop($textarea[0].scrollHeight);</code> to <code>$textarea.scrollTop(0);</code> to scroll to the top of <code>textarea</code>.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$("button").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop(0); });</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>Scroll</button> <textarea Name="update" Id="update" cols="50" rows="25"></textarea></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="edited Dec 24 '17 at 07:02">edited Dec 24 '17 at 07:02</time> <a href="../../users/4540183/pedram" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4540183.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Pedram" /> </a> <div class="s-user-card--info"> <a href="../../users/4540183/pedram" class="s-user-card--link">Pedram</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">15,766</li> <li class="s-award-bling s-award-blinggold" title="10 gold badges">10</li> <li class="s-award-bling s-award-blingsilver" title="44 silver badges">44</li> <li class="s-award-bling s-award-blingbronze" title="73 bronze badges">73</li> </ul> </div> </div> </div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 24 '17 at 06:51">answered Dec 24 '17 at 06:51</time> <a href="../../users/4940910/cdoshi" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/4940910.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="cdoshi" /> </a> <div class="s-user-card--info"> <a href="../../users/4940910/cdoshi" class="s-user-card--link">cdoshi</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">2,772</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="13 silver badge">13</li> <li class="s-award-bling s-award-bling__bronze" title="20 bronze badge">20</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> <div id="comments-47958634" class="comments js-comments-container bt bc-black-075 mt12 " data-post-id="47958634" data-min-length="15"> <ul class="comments-list js-comments-list" data-remaining-comments-count="0" data-canpost="false" data-cansee="true" data-comments-unavailable="false" data-addlink-disabled="true"> <li id="comment-82886560" class="comment js-comment " data-comment-id="82886560" data-comment-owner-id="4940910" data-comment-score="1"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> <span title="number of 'useful comment' votes received" class="warm">1</span> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment82886560_47958634"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">Why the downvote? I tested it and it does what the question asked</span> – <a href="../../users/4940910/cdoshi" title="2,772 reputation" class="comment-user ">cdoshi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/47958600/javascript-to-scroll-textarea-content-back-to-top#comment82886560_47958634"><span title="2017-12-24T06:55:30.753 License: CC BY-SA 3.0" class="relativetime-clean">Dec 24 '17 at 06:55</span></a></span> </div> </div> </li> <li id="comment-82886570" class="comment js-comment " data-comment-id="82886570" data-comment-owner-id="5008955" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment82886570_47958634"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">It works! How can I use both scroll to last and top function in this?</span> – <a href="../../users/5008955/cody-coderson" title="411 reputation" class="comment-user owner">Cody Coderson</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/47958600/javascript-to-scroll-textarea-content-back-to-top#comment82886570_47958634"><span title="2017-12-24T06:56:40.423 License: CC BY-SA 3.0" class="relativetime-clean">Dec 24 '17 at 06:56</span></a></span> </div> </div> </li> <li id="comment-82886584" class="comment js-comment " data-comment-id="82886584" data-comment-owner-id="4940910" data-comment-score="0"> <div class="js-comment-actions comment-actions"> <div class="comment-score js-comment-edit-hide"> </div> </div> <div class="comment-text js-comment-text-and-form"> <a name="comment82886584_47958634"></a> <div class="comment-body js-comment-edit-hide"> <span class="comment-copy">$textarea.scrollTop($textarea[0].scrollHeight); will take you to the bottom. You will probably need two buttons (depends on requirements) One that will take you to the top and other on click will take you to the bottom.</span> – <a href="../../users/4940910/cdoshi" title="2,772 reputation" class="comment-user ">cdoshi</a> <span class="comment-date" dir="ltr"><a class="comment-link" href="../../questions/47958600/javascript-to-scroll-textarea-content-back-to-top#comment82886584_47958634"><span title="2017-12-24T06:58:00.403 License: CC BY-SA 3.0" class="relativetime-clean">Dec 24 '17 at 06:58</span></a></span> </div> </div> </li> </ul> </div> </div> </div> </div> <a name="47958684"></a> <div id="answer-47958684" class="answer " data-answerid="47958684" data-ownerid="9106013" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="47958684"> <button class="js-vote-up-btn grid--cell s-btn s-btn__unset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Try this javascript code. Set the top and left to 0 and scrolls the textarea to top from bottom.</p> <p></p><div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>function scrolltop() { var scr_top = document.getElementById("update"); scr_top.scrollLeft = 0; scr_top.scrollTop = 0; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><!DOCTYPE html> <html lang="en"> <head> </head> <body> <button onclick="scrolltop()">Scroll</button> <textarea name="update" id="update" cols="50" rows="25"></textarea> </body> </html></code></pre> </div> </div> </div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 24 '17 at 06:59">answered Dec 24 '17 at 06:59</time> <a href="../../users/9106013/shashankk-sai" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/9106013.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shashankk Sai" /> </a> <div class="s-user-card--info"> <a href="../../users/9106013/shashankk-sai" class="s-user-card--link">Shashankk Sai</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">69</li> <li class="s-award-bling s-award-blingbronze" title="5 bronze badges">5</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="47958844"></a> <div id="answer-47958844" class="answer " data-answerid="47958844" data-ownerid="5008955" data-score="1" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="47958844"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Here's the complete code.</p> <p>On button click, The content would navigate to bottom and/or top of the content of the tag</p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="last">Scroll to bottom</button> <textarea Name="update" Id="update" cols="50" rows="25"></textarea> <script> $(document).ready(function() { $("#last").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop($textarea[0].scrollHeight); }); }); </script> <button id="first">Move to Top</button> <script> $(document).ready(function() { $("#first").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop(0); }); }); </script> </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature owner grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 24 '17 at 07:25">answered Dec 24 '17 at 07:25</time> <a href="../../users/5008955/cody-coderson" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/5008955.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Cody Coderson" /> </a> <div class="s-user-card--info"> <a href="../../users/5008955/cody-coderson" class="s-user-card--link">Cody Coderson</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">411</li> <li class="s-award-bling s-award-blinggold" title="1 gold badge">1</li> <li class="s-award-bling s-award-blingsilver" title="9 silver badge">9</li> <li class="s-award-bling s-award-blingbronze" title="21 bronze badge">21</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> <a name="47958710"></a> <div id="answer-47958710" class="answer " data-answerid="47958710" data-ownerid="7126139" data-score="0" itemprop="suggestedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div class="post-layout"> <div class="votecell post-layout--left"> <div class="js-voting-container grid jc-center fd-column ai-stretch gs4 fc-black-200" data-post-id="47958710"> <button class="js-vote-up-btn grid--cell s-btn s-btnunset c-pointer"><svg aria-hidden="true" class="m0 svg-icon iconArrowUpLg" width="36" height="36" viewBox="0 0 36 36"><path d="M2 26h32L18 10 2 26z"></path></svg></button> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="0">0</div> </div> </div> <div class="postcell post-layout--right"> <div class="s-prose js-post-body" itemprop="text"><p>Two issues here:</p> <ol> <li><code>document.ready</code> should be checked on the outer scope, before any usage of JQuery.</li> <li>for scrolling up to element top, scroll value should be 0</li> </ol> <p>Hence:</p> <pre><code> $(document).ready(function() { $("button").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop(0); }); }); </code></pre></div> <div class="mb0"> <div class="mt16 grid gs8 gsy fw-wrap jc-end ai-start pt4 mb16"> <div class="grid--cell mr16 fl1 w96"></div> <div class="post-signature grid--cell"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="answered Dec 24 '17 at 07:02">answered Dec 24 '17 at 07:02</time> <a href="../../users/7126139/yuval-bl" class="s-avatar s-avatar32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7126139.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="yuval.bl" /> </a> <div class="s-user-card--info"> <a href="../../users/7126139/yuval-bl" class="s-user-card--link">yuval.bl</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">4,890</li> <li class="s-award-bling s-award-blinggold" title="3 gold badges">3</li> <li class="s-award-bling s-award-blingsilver" title="17 silver badges">17</li> <li class="s-award-bling s-award-blingbronze" title="31 bronze badges">31</li> </ul> </div> </div> </div> </div> </div> </div> <div class="post-layout--right js-post-comments-component"> </div> </div> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>