All geek questions in one place

Javascript to scroll the contents of <textarea> up

I want the following code, modified so that when a button is clicked, it scrolls the contents of the text area from bottom to top.

$("button").on("click", function() { $(document).ready(function() { var $textarea = $('#update'); $textarea.scrollTop($textarea[0].scrollHeight); }); }); 
 <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>
+5
source share
4 answers

Change the following line $textarea.scrollTop($textarea[0].scrollHeight); on $textarea.scrollTop(0); to go to the beginning of textarea .

 $("button").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop(0); }); 
 <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>
+5
source

Try this javascript code. Set the top and left areas to 0 and scroll the text box at the top to bottom.

 function scrolltop() { var scr_top = document.getElementById("update"); scr_top.scrollLeft = 0; scr_top.scrollTop = 0; } 
 <!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>
0
source

Two questions here:

  • document.ready should be checked in the outer scope, before any use of jQuery.
  • to scroll to the top of the element, the scroll value must be 0

Hence:

  $(document).ready(function() { $("button").on("click", function() { var $textarea = $('#update'); $textarea.scrollTop(0); }); });
0
source

Here is the full code.

Click the "On" button, "Content" will move down and / or at the top of the tag content

 <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>
0
source

Source: https://habr.com/ru/post/1274301/

More articles:


All Articles