diff --git a/static/js/compose_ui.js b/static/js/compose_ui.js
index 544171b612..a5d7578499 100644
--- a/static/js/compose_ui.js
+++ b/static/js/compose_ui.js
@@ -172,7 +172,7 @@ export function make_compose_box_full_size() {
 
     $(".collapse_composebox_button").show();
     $(".expand_composebox_button").hide();
-    $("#scroll-to-bottom-button-container").hide();
+    $("#scroll-to-bottom-button-container").removeClass("show");
     $("#compose-textarea").trigger("focus");
 }
 
diff --git a/static/js/message_scroll.js b/static/js/message_scroll.js
index c22fe50990..656040b1c6 100644
--- a/static/js/message_scroll.js
+++ b/static/js/message_scroll.js
@@ -137,7 +137,7 @@ export function hide_scroll_to_bottom() {
     if (message_viewport.bottom_message_visible() || message_lists.current.empty()) {
         // If last message is visible, just hide the
         // scroll to bottom button.
-        $show_scroll_to_bottom_button.fadeOut(500);
+        $show_scroll_to_bottom_button.removeClass("show");
         return;
     }
 
@@ -148,7 +148,7 @@ export function hide_scroll_to_bottom() {
             !narrow_state.narrowed_by_topic_reply() &&
             !$show_scroll_to_bottom_button.get(0).matches(":hover")
         ) {
-            $show_scroll_to_bottom_button.fadeOut(500);
+            $show_scroll_to_bottom_button.removeClass("show");
         }
     }, 3000);
 }
@@ -162,7 +162,7 @@ export function show_scroll_to_bottom_button() {
     }
 
     clearTimeout(hide_scroll_to_bottom_timer);
-    $("#scroll-to-bottom-button-container").fadeIn(500);
+    $("#scroll-to-bottom-button-container").addClass("show");
 }
 
 $(document).on("keydown", (e) => {
@@ -172,7 +172,7 @@ $(document).on("keydown", (e) => {
 
     // Hide scroll to bottom button on any keypress.
     // Keyboard users are very less likely to use this button.
-    $("#scroll-to-bottom-button-container").fadeOut(500);
+    $("#scroll-to-bottom-button-container").removeClass("show");
 });
 
 export function is_actively_scrolling() {
diff --git a/static/styles/zulip.css b/static/styles/zulip.css
index 2b8043981c..d8509fb62f 100644
--- a/static/styles/zulip.css
+++ b/static/styles/zulip.css
@@ -2976,11 +2976,18 @@ div.topic_edit_spinner .loading_indicator_spinner {
 }
 
 #scroll-to-bottom-button-container {
-    display: none;
-    z-index: 3;
+    display: block;
     position: absolute;
     bottom: 41px;
     right: 0;
+    visibility: hidden;
+    opacity: 0;
+    transition: visibility 500ms, opacity 500ms ease-in-out;
+
+    &.show {
+        visibility: visible;
+        opacity: 1;
+    }
 
     #scroll-to-bottom-button-clickable-area {
         width: 60px;
diff --git a/static/templates/compose.hbs b/static/templates/compose.hbs
index cd991b4c32..9fb7388df8 100644
--- a/static/templates/compose.hbs
+++ b/static/templates/compose.hbs
@@ -3,7 +3,7 @@
     helps us align it at various screens sizes with
     minimal css and no JS. We keep it `position: absolute` to prevent
     it changing compose box layout in any way. --}}
-    <div id="scroll-to-bottom-button-container">
+    <div id="scroll-to-bottom-button-container" aria-hidden="true">
         <div id="scroll-to-bottom-button-clickable-area" data-tooltip-template-id="scroll-to-bottom-button-tooltip">
             <div id="scroll-to-bottom-button">
                 <i class="fa fa-chevron-down"></i>