I am not able to find the above code in index.php. How can I fix this issue?

Hello @yellowwoods12
You can test it in the Joomla 4.0 admin panel via System-> Templates -> Site templates-> Cassiopeia Details and Files-> index.php
Either edit it as explained above, or copy and paste in the entire code from the attached file (scrabble96-cassiopeia-index-php-v1.txt) which is a copy of my updated version of the index.php. And then copy the css code above into your user.css file (you may need to create one, first)
scrabble96-cassiopeia-index-php-v1.txt
user.txt

This works for the button in RTL. But it does not solve the fact that a module in the footer position is not displayed to the bottom left of the page as it is in Protostar by default. Also the <hr> is not displayed.
This can be solved by taking off grid-child for the footer, i.e. using
<footer class="container-footer footer">

Also we need to adapt the .gotop and .back-top classes to RTL, therefore some changes in both .scss files before compiling.

Hi @infograf768
I didn't mention the footer position display (which I had noticed) as I considered this is was a separate issue. As it stands, the footer is not mobile-responsive, but whilst removing 'grid-child' from the footer code makes the <hr> appear, it does mean that footer modules on a large screen are stacked rather than displayed in a row.

To solve this, I would suggest the following:

Change
<footer class="grid-child container-footer footer">
to
<footer class="container-footer footer row">

and then ensure that each footer module has the class "col-md" or "col-sm" so,

the Joomla! footer would change from
<div class="mod-footer">
to
<div class="mod-footer col-md">
and, for example, a custom footer module would change from
<div class="mod-custom custom" >
to
<div class="mod-custom custom col-md" >
I daresay some extra code in the modules.php would sort this out.

Also we need to adapt the .gotop and .back-top classes to RTL, therefore some changes in both .scss files before compiling.

I think the only difference between RLT and LTR for the back-to-top button - using my css suggestions - is that if you want it on the right you have right: 10px; (or 0 if preferred) and if you want it on the left you have left: 10px;

BTW, the margin-top: 500px; in the .go-top css is not necessary; it was a hangover from trying a slightly different route to the same end. I'll comment it out.

After some tests, I see no reason to change the size and colour of the icon, thus respecting the original intention of the template designers.
I tested here OK by modifying scss/blocks/_footer.scss

.gotop {
  position: absolute; 
  width: 38px; 
  height: 34px; 
  padding: 7px 12px; 
  border-radius: 3px; 
  bottom: 10px; 
  right: 10px;  // right: auto; for RTL in template-rtl.scss
  left: 10px; //for RTL in template-rtl.scss
  background-color: $cassiopeia-template-color; // which will give #434178 in the css
  z-index: 999;
}

.back-top {
  color: white;
}

.back-top:hover {
  color: #A1A0BB;
}

This gives

and correct reverse in RTL.

I have prepared a patch (will need to be compiled with npm ci), if you agree.
Indeed the footer display should be taken care of in another patch, but my patch already takes off grid-child to at least display what we have to the left or right depending on language.

(Sorry, can't get the 'quote reply' to work properly for some reason)
@infograf768 : "After some tests, I see no reason to change the size and colour of the icon, thus respecting the original intention of the template designers."
Fair enough, although it seems a bit small to me.

@infograf768 : "I tested here OK by modifying scss/blocks/_footer.scss"
Please correct me if I have made the wrong assumption here, but this would imply that the back-to-top icon is still only visible if a footer module is assigned. Not everyone will use a footer module. This is why in my original post I suggested moving the back-to-top icon into a new div in the index.php with position: absolute outside the footer module and nested inside a new div with position: relative which wraps the whole page from top to bottom, so it will appear at the bottom regardless of what, if any, modules appear below the component area.

I have used your code in the index.php. The icon is separated from the footer container, but I still use the scss/blocks/_footer.scss for the css code.
Therefore one does not need anymore to assign a module to the footer for the backtotop icon to display.
We can, if desired, change the name of that file to _backtotop.scss and load it in template.scss instead of _footer.scss, which will not change anything to the results.

Here is the .diff to understand better
backtotop.diff.zip
and a screenshot where no module is assigned to the footer position.

One concern I still have is that the icon would be displayed over any content (although not much) when the the window is narrowed and we have no footer module.

Thanks for the clarification re the index.php.

Regarding the overlap, that's why I changed the solid background colour to a 0.75 transparency. It will overlap any footer module as well, anyway.

Regarding the overlap, that's why I changed the solid background colour to a 0.75 transparency. It will overlap any footer module as well, anyway.

Hmm. Imho we have to find another solution.

Modifying css above to bottom: -24px; does the trick.

What do you think?

Yes, bottom: -24px; works.

This only appears when you get to the bottom of the page so, if there's a lot of content, particularly on a small screen, there's no other way to get back to the top unless you either reach the bottom and click the icon or scroll up manually.

An icon that appears after, say, 700px would be ideal, but that would mean using scroll-positioning Javascript and I know that some browsers - e.g. Firefox - complain if you use scroll-positioning. I can't think of another way to achieve this.

This only appears when you get to the bottom of the page so, if there's a lot of content, particularly on a small screen, there's no other way to get back to the top unless you either reach the bottom and click the icon or scroll up manually.

afaik, we never provided a scroll positioning in j default templates. Let’s go with what we have. I will propose the pr and we will see how people react.

This should be closed as we have a PR

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