Back to top button

[SoloInter]

I know that this is a subject that has been discussed since the dawn of time and that you have always wished not to integrate this kind of functionality, but it would be very useful all the same. 

A little advice for adding this with a simple FA icon?

[Amy Pond]

I’m joining this request too 🙂

[Jimi Wikman]

In your theme you can just go to the footer HTML and throw in something like this:
 

<style>
/*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
        bottom: 10px;
        float: right;
        right: 5%;
        left: auto;
        width: auto;
        font-size: 12px;
        border-color: rgba(85, 85, 85, 0.2);
        background-color: rgb(100,100,100);
        padding: 10px 15px;
        border-radius: 4px;

/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #7dbbf1;
    }
</style>

<button id="myBtn"><a href="#top" style="color: white"><i class="fa-solid fa-circle-chevron-up"></i> Back to Top</a></button>

 

Edited November 2 by Jimi Wikman
Added the FontAwesome icon as well.

[SoloInter]

Thanks dude, I will try this one tonight 

[Jimi Wikman]

Just style it a bit nicer 🙂

[SoloInter]

Yep, I will just put a fa-icon and it will be good

[SoloInter]

I added it. I just change some things in the CSS because on mobile the button is hidden behind other elements.

/*Floating Back-To-Top Button*/
    #myBtn {
        position: fixed;
		z-index: 100;
        bottom: 70px;
        float: right;
        right: 3%;
        left: auto;
        width: auto;
        font-size: 18px;
        border-color: rgba(85, 85, 85, 0.2);
        background-color: rgb(100,100,100);
        padding: 5px 5px 5px 10px;
        border-radius: 4px;

/*On Hover Color Change*/
    #myBtn:hover {
        background-color: #7dbbf1;
    }

 

[Ehren]

On 11/3/2024 at 3:06 AM, Jimi Wikman said:

In your theme you can just go to the footer HTML and throw in something like this:

Since <button> elements shouldn't contain <a> elements, I'd recommend using this instead:

<style>
	/* Smooth scroll when the button is clicked */
	html:has(.scrollToTop:hover, .scrollToTop:focus){
		scroll-behavior: smooth;
	}
	/*Floating Back-To-Top Button*/
	.scrollToTop {
		position: fixed;
		bottom: 10px;
		inset-inline-end: 10px;
		font-size: 12px;
		color: #fff;
		background-color: var(--i-background_dark);
		padding: 10px 15px;
		border-radius: 4px;
	}
		.scrollToTop:hover {
			background-color: var(--i-primary);
		}
		.scrollToTop i{
			margin-inline-end: .4em;
			opacity: .7;
		}
</style>
<a href="#" class="scrollToTop"><i class="fa-solid fa-circle-chevron-up"></i> Back to Top</a>

 

[SoloInter]

Thanks @Ehren

On mobile it's hidden. What's the best way to display this also on mobile ? Taking account of the navigation bar on the bottom.

 

z-index: 100;
bottom: 70px;

?

Edited November 3 by SoloInter

[Ehren]

Yep, that should work 🙂 

[Marc]

I always use the 'home' button on my keyboard, personally. Much quicker than anything that can be put on screen to click on 🙂 

[SoloInter]

We have been around for 20 years, thanks to you, we have old people, including me, who are now 40-50 years old and who like their old habits like back to top buttons and cakes next to their nickname when it's their birthday. It doesn't take much to make them happy, just don't change their good old habits too much. 😂

[David N.]

Mac keyboards don't have a home button. One could use the fn key in combination with the left arrow key, but most users don't know that. 

[Esther E.]

2 hours ago, SoloInter said:

We have been around for 20 years, thanks to you, we have old people, including me, who are now 40-50 years old and who like their old habits like back to top buttons and cakes next to their nickname when it's their birthday. It doesn't take much to make them happy, just don't change their good old habits too much. 😂

Who are you calling old???

 

[SoloInter]

Oupsiii 😅 😬

It's just that we have more and more new members joining the community and introducing themselves by indicating their age. That's when we realize that they weren't born when the community was already alive for a few years. It makes me feeling old 🤭

Edited November 4 by SoloInter

[Jim M]

8 hours ago, David N. said:

Mac keyboards don't have a home button. One could use the fn key in combination with the left arrow key, but most users don't know that. 

Sounds like it’s time to switch to Windows 🤣. I kid... Few different ways on Mac:

 https://macpaw.com/how-to/scroll-on-mac
 

Wish all OS would just build something in like iOS . Be a mic drop to the ugly “back to top” buttons 🙂.