Jump to content

Recommended Posts

Posted

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?

Posted (edited)

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 by Jimi Wikman
Added the FontAwesome icon as well.
Posted

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;
    }

 

Posted
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>

 

Posted (edited)

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 by SoloInter
Posted

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. 😂

Posted
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???

 

Posted (edited)

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 by SoloInter
Posted
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 🙂

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...