As mentioned, I don't believe there is a need for the extra div inside the body.

Firstly move the following outside of the footer.. https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/scss/blocks/_footer.scss#L5-L10 Add your absolute positioning and set the body position to relative (https://github.com/joomla/joomla-cms/blob/4.0-dev/templates/cassiopeia/scss/blocks/_global.scss#L8).

Do you not think it would be best to make the "Back to Top" a custom module and add the markup in there?

This way the user can easily disable it without affecting the footer module and the HTML is decoupld from the index.php

If I rightly remember, this was our objective a couple of years back, e.g the footer, logo, etc..

Do you not think it would be best to make the "Back to Top" a custom module and add the markup in there?

Why not, as long as RTL is taken care of, which is also not done in this PR.
I had proposed in the original issue if we keep the new <div>, i.e. if we have that part in index.php

+		<div class="gotop">
+			<a href="#top" id="back-top" class="back-top" title="<?php echo Text::_('TPL_CASSIOPEIA_BACKTOTOP'); ?>"><span class="icon-arrow-up-4" aria-hidden="true"></span></a>
+		</div>

The following css

diff --git a/templates/cassiopeia/scss/blocks/_footer.scss b/templates/cassiopeia/scss/blocks/_footer.scss
index 60642d0..a3cc206 100644
--- a/templates/cassiopeia/scss/blocks/_footer.scss
+++ b/templates/cassiopeia/scss/blocks/_footer.scss
@@ -1,12 +1,21 @@
-// Footer
+// Footer back to top
 
-.footer {
-
-  .back-top {
-    padding: 8px 11px;
-    color: #fff;
-    background: $cassiopeia-template-color;
-    border-radius: 3px;
-  }
-
+.gotop {
+  position: absolute; 
+  width: 38px; 
+  height: 34px; 
+  padding: 7px 12px; 
+  border-radius: 3px; 
+  bottom: -24px; 
+  right: 10px; 
+  background-color: $cassiopeia-template-color;
+  z-index: 999;
 }
+
+.back-top {
+  color: white;
+}
+
+.back-top:hover {
+  color: #A1A0BB;
+}
\ No newline at end of file
diff --git a/templates/cassiopeia/scss/template-rtl.scss b/templates/cassiopeia/scss/template-rtl.scss
index dc4944a..f737aa7 100644
--- a/templates/cassiopeia/scss/template-rtl.scss
+++ b/templates/cassiopeia/scss/template-rtl.scss
@@ -57,2 +57,7 @@
   padding-right: 0;
 }
+
+.gotop { 
+  right: auto;
+  left: 10px;
+}

@infograf768 how can I resolve the RTL thing?

how can I resolve the RTL thing?

The css I posted above explain it.

I still do not agree concerning size and color of the icon. It should imho be smaller and use the template color
I also question the creation of user.css in templates/system/css/ instead of using _footer.scss or a new _whatever-scss file in Cassiopeia scss/blocks folder as this ONLY concerns Cassiopeia template.

If footer.scss is not used anymore, it should be deleted and @import "blocks/footer"; also in template.scss.

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/23606

Closing as this is not the proper fix. Thank you.

Closing as this is not the proper fix. Thank you.