SoloInter Posted November 2 Posted November 2 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 1
Jimi Wikman Posted November 2 Posted November 2 (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 November 2 by Jimi Wikman Added the FontAwesome icon as well. SoloInter, David N. and Amy Pond 1 2
SoloInter Posted November 2 Author Posted November 2 Yep, I will just put a fa-icon and it will be good
SoloInter Posted November 2 Author Posted November 2 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; } David N. and Jimi Wikman 2
Ehren Posted November 3 Posted November 3 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> David N., Jimi Wikman, SeNioR- and 1 other 2 2
SoloInter Posted November 3 Author Posted November 3 (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 November 3 by SoloInter
Marc Posted November 4 Posted November 4 I always use the 'home' button on my keyboard, personally. Much quicker than anything that can be put on screen to click on 🙂 Jim M 1
SoloInter Posted November 4 Author Posted November 4 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. 😂 Jimi Wikman, Marc and David N. 3
David N. Posted November 4 Posted November 4 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. Posted November 4 Posted November 4 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 1
SoloInter Posted November 4 Author Posted November 4 (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 November 4 by SoloInter Esther E. 1
Jim M Posted November 4 Posted November 4 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 🙂.
Recommended Posts