How to scroll a textarea to the bottom of the page in javascript

Scrolling textarea to the bottom can be done using plain javascript and no libraries required. When a user scrolls down your webpage, the action can be designed to trigger a variety of animation options such as fade effects, blur, 3D, parallax, and more. There are 25 JS libraries here that can help you achieve that sort of response in your site design. You can use libraries if you want, but for the purposes of this article, we will use plain javascript code.

Benefits of using JavaScript

A high level of abstraction means that you do not learn as much as you could. This means you could end up stuck in an infinite loop of a novice developer that uses jQuery and therefore stays novice. The library needs to be included in every HTML webpage. Vanilla JS was found to be (way) faster than jQuery, depending on the operation you’re comparing it can be up to 10x to 25x faster.

window.scrollTo(x-coord, y-coord)
window.scrollTo(options)
Parameters
x-coord is the pixel along the horizontal axis of the document that you want to be displayed in the upper left.
y-coord is the pixel along the vertical axis of the document that you want to be displayed in the upper left.

We can pick an icon from material-ui or use simple text saying ‘top’. Here is a link

https://material.io/resources/icons/?style=baseline

<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=” stylesheet”>

CSS

        #btnScrollToTop {
position: fixed;   //  as we scroll down the page it will float on top of the content
right: 10px;
bottom : 10px; 
width: 50px;
height: 50px; 
border-radius: 50%;

background: #e62739;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
color: #ffffff;
border: none;
outline: none;
cursor: pointer;
     }
#btnScrollToTop: active {
    background: #cc2333;
</style>

HTML & JavaScript

<h1> Scroll to the Top  Button </h1>
     <button id=”btnScrollToTop”>
     <i class=”material-icons”>arrow_upwards</i>

</button>
<div>...</div>
<script>
    const btnScrollToTop = document.querySelector(“#btnScrollToTop”);
btnScrollToTop.addEventListener(“click”, function() {
1)    first method in plain javascript that will work in internet explorer, with animation.

window.scrollTo(0, 0);     // scrollHeight property - 0 is left, 0 is top

2)     the second method will take an object that contains three properties in plain javascript.

window.scrollTo({ 
top: 0,
left: 0,
behavior: “smooth”

3)    third method by using jQuery which will give the best results in terms of capability.
     $(“html, body”).animate{ scrollTop: 0 }, “slow”);          //here we only specify the scroll top value
});
});
});
</script>
</body>

The term “cross-browser” in the JavaScript world refers to the ability to run the JavaScript code in multiple web browsers. So, if you have built a web application, it refers to the ability of your application to support multiple web browsers. If you would like to have your application be cross-browser compatible, the application should work the same way in web browsers such as Internet Explorer, Mozilla Firefox, Google Chrome, Opera, and Safari.

Fixing cross-browser compatibility issues can be a frustrating and daunting task. You should test your web application for cross-browser compatibility issues before you deploy the application. When building web applications that can support multiple web browsers, there might be different results when testing the application depending on various factors involved (i.e., plugins not working perfectly in one or more web browsers, alignment issues, HTML5 video formatting issues, text and font issues, etc.). Hence, it is a recommended strategy to incorporate cross-browser testing as a part of your testing cycle. There are plenty of tools around to help you with this. Some of the popular ones include browser shots, browsercam, IETester, and Firebug.