generate-back-to-top relative to container width

Ha ha, after looking a lot, i just found this answer to this question right after I posted it.

https://generatepress.com/forums/topic/moving-back-to-top-button/

Mark as closed

Sorry, closed this too early. With the changes to the code, the back-to-top only appears once one scrolls all the way down the page, instead of appearing after one scrolls a bit. I'd like the original functionality, just change the horizontal location so it is over the footer (which I've set a max width to).

Hi there,

Is this what you are looking for?
https://docs.generatepress.com/article/back-to-top-button/#moving-the-button

Not really, because the problem is that relative to the edge of the viewport is not what is needed, but rather relative to the footer/footer bar. The problem comes with the fix from this post: https://generatepress.com/forums/topic/moving-back-to-top-button/ is that the back-to-top doesn't show up until all the way at the bottom.

Hi Jeff,

Try this css:

.site-footer {
    position: relative;
}

.generate-back-to-top,
.generate-back-to-top:visited {
    left: 50%;
    transform: translateX(400px);
}

Thank you. I've played with this and I think I need a media query. When the viewport is smaller than the width of the page, then this works:

/* back to top */
.site-footer {position: relative;}

@media only screen and (max-width: 780px) {
.generate-back-to-top,
.generate-back-to-top:visited {
transform: translate(20px,-50px);}}

@media only screen and (min-width: 781px){
.generate-back-to-top,
.generate-back-to-top:visited {
left: 50%;
transform: translate(350px);}}

The only thing I'd like to fix is that the back-to-top caret needs to be moved up a few pixels on the > 780 width. (so that it is not covering my sticky footer).

Any suggestion on how to do that?

Hi there

can you share a link to the site where we can see the issue ?

https://lannamontessori.com

Hi Jeff,

You could add bottom: 100px; to your css for desktop, and bottom: 50px; to the css for mobile.

Let me know :)

สวัสดีครับคุณหญิง

This seems to work for me:

/* back-to-top above footer*/
.site-footer {position: relative;}
@media only screen and (max-width: 768px) {
.generate-back-to-top,
.generate-back-to-top:visited {bottom:80px;transform: translate(28px);}}
@media only screen and (min-width: 769px){
.generate-back-to-top,
.generate-back-to-top:visited {left:50%;
bottom:80px;
transform: translate(350px);}}

ขอบคุณครับ

Great :)
Glad it worked!