jquery - Javascript to scroll <textarea> content back to top

I want the following code, changed so that on button press, it scrolls the text area content from bottom to top.

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

<script src=".1.1/jquery.min.js"></script>
<button>Scroll</button>
<textarea Name="update" Id="update" cols="50" rows="25"></textarea>

I want the following code, changed so that on button press, it scrolls the text area content 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>

Share Improve this question edited Dec 24, 2017 at 6:58 Pedram 16.6k10 gold badges47 silver badges73 bronze badges asked Dec 24, 2017 at 6:44 Cody Coderson 4211 gold badge10 silver badges22 bronze badges

Scroll to top of jQuery-Textarea | Just change $textarea.scrollTop($textarea[0].scrollHeight); => $textarea.scrollTop(0); – Pedram Commented Dec 24, 2017 at 6:47
Do not put document.ready inside a click function! – Pedram Commented Dec 24, 2017 at 6:49

Add a comment |

4 Answers 4

Sorted by: Reset to default 12

Change the following line $textarea.scrollTop($textarea[0].scrollHeight); to $textarea.scrollTop(0); to scroll to the top 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>

Try this javascript code. Set the top and left to 0 and scrolls the textarea to top from 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>

Here's the complete code.

On button click, The content would navigate to bottom and/or top of the content of the tag

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

Two issues here:

document.ready should be checked on the outer scope, before any usage of JQuery.
for scrolling up to element top, scroll value should be 0

Hence:

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

jquery - Javascript to scroll <textarea> content back to top - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)