Create A Back To Top Button On Elementor Free | Floating Scroll To Top ⬆️
Vložit
- čas přidán 16. 03. 2021
- Create a floating scroll to top button on Elementor.
🔵 Join Our Facebook Community!
bit.ly/urielsotofbgroup
🟢 Tech Support:
urielsoto.com/services/
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/elementormobile
🟣 Website Building Factory Course
bit.ly/websitebuildingfactory
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielelementorpro
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a
#elementor
For the people who are having this problem "clicking the scroll to top button only scrolls a small percentage of the way up."
You need to put a anchor tag above the header instead of putting the link in the header itself.
This is because you have a sticky header.
this tutorial is the best one I've seen about how to do this correctly, thanks Uriel. Btw, it doesn't work when you have a sticky header, so here's what I did: added another section to my header (below the sticky section) and added the 'scrollup' ID to that section instead. Then I set margin/padding to 0, columns gap to No Gap and outer section padding to No Padding. That did the trick for me.
Yes, you're right. You can also add the second section and use the responsive option in section - advanced settings - and select hide on all devices.
The only problem is you never show a scroll to top button when you are at the top of a page. So there is a step missing. The button should only show after you have scrolled down the page to a certain distance. How would you achieve that?
I've been toiling with this for the last 2 days. Your video let me do it in 20 min. Thank you so much
I have watched so many of your videos. All very helpful. Thank you Uriel
Thank you so much Uriel! Great tutorial covers everything I needed. Really appreciate it
Excellent! I thought this was only possible with Elementor Pro. Thanks a lot!
Thanks Uriel. You have explained it quiet nicely.. Keep doing the good work. Million thanks !
Thanks 🙏🏼
Thank for the tutorial...It works on every page but I only have the problem that the speed of scrolling up is very very slowly. I use pro and I have put my arrow icon in the footer and the id in my header as you mentioned in the video...what to do to speed this scrolling up
Excellent, clear video. Thank you!
perfect explanation and work flow! thank you!
Thank you, Uriel! This is easy to understand and very helpful.
Thank you so much for this video. When I click my button it only scrolls a little bit upward but not all the way to the top. I have it linked to the header. Any idea why this might be happening?
Thanks very much indeed for this, Uriel. Really helpful!
Great work thanks, got it working first time
Thank you SO much! Works great, except that the arrow goes behind images that are part of a section's background... Could you suggest a solution for that? I inherited this site, WP is new to me, I'm an old school coder...
Thanks for sharing; this one helped me a lot.
its' first time i see your video, thank you for simple tutorial bro i hope you have great day
Gracias, vi varios tutoriales en español y ninguno me gustó, he realizado el tuyo con subtitulos y lo entendí perfectamente. Thanks.
Great tutorial! Thanks
Gracias por tus videos. es normal que con Elementor PRO la base de datos pese tanto? tengo un sitio que no tiene tantas páginas y la base de datos pesa mas de 1GB y me han dicho los del hosting que eso es demasiado
Thanks!!! Very, very helpful!!
Nice and easy, thanks a lot!
Thanks a million, man!
So helpful, thank you!!!
Works perfect thanks
Great video thank you!
Awesome!! Thanks.
Great tutorial. thanks. 🙂
thanks man - very helpful!!!
Thank you so much for your explanation it is very clear.
Great! Thank you!
What if you use sticky header? It's not going to scroll up if the header stays while you scroll
Fabulous so easy thank you
Thanks!
Hello Mr. Uriel i want to ask, the section of Positioning for the icon is not showing on my elementor. Do you know why? and how to fix it? thanks
Very helpful...how did you check how response your site was
Thank you!
this man just awesome
Ma man, really helpfull video. Thank you very much !
Una consulta como configuro el botón para volver "atrás" .. ??
thank you so much
Very helpful - thank you.
Thanks appreciate it man
Hi, I followed this video and created a fixed button for a event site. But when I browse the site on safari, I found that the fixed button suddenly jumps up when the nav bar of safari appears and moves up. My reference site`s button is smoothly following the movement of the nav bar instead. It makes a very strange experience when browsing the site however I cannot find any solution of it.
It helps me . Thank you.
Glad to hear that
Thanks !! ❤
Hi, Thanks for this tutorial. Made my day. Im not using the pro version, but if I want the arrow on every single page, will it work if I just repeat the steps in every single page?
Yes just repeat the steps in every single page or just right click the element and copy it and paste it to the next page
@@UrielSoto Thanks for your quick reply. Appreciate it. :)
Thank you very much, very useful tutorial .
You're welcome! :)
i followed these instructions to make both a scroll up button and scroll down button, but strangely, the scroll up button goes up only in small increments, while the scroll down button goes all the way down to the bottom of the page with one press. i can't figure out why it is behaving this way.
Thanks! This is awesome! Works great on mobile but on computer only moves in small increments very slowly. Does that mean I did something wrong, or can you help me figure this out? Thanks
I have the exact same issue but with all screen sizes. Has anyone fixed this? Using Elementor Pro 3.5.0
@@ohboy2118 I went with a different one
thank you sir
Hey, thanks for the tutorial. My button works but it doesn't completely go all the way to the top. Please help?
Great.
i think scroll fade is only on pro cos i don't have scroll fade in the motion effect
the go top arrow appears on one page only.
how to show across the whole website ?
I'm wondering not to create it page by page, right ?
Thanks Uriel! Is there a way to add a "Back to the Top" text above the arrow icon?
Do it the same way with text element or add both to a column and make the position fixed with a right: 0; bottom:0;
Will scroll button work, if page header has position fixed? Thanks.
Yes
very good you male my work easy dude
Hi thanks a lot, can I make it disappear when using Elementor Free?
Yeah if you use the motion affects on scroll
Great! How do you make it disappear or fade while scrolling up?
Use your motion effect for a scroll fade.
@@UrielSoto ok. Thanks
is there a way to make the button disappear after a few seconds?
Thanks for the video. I notice when I use the css id in the header, clicking the scroll to top button only scrolls a small percentage of the way up. But when I add the css id to the top section of the actual page it scrolls all the way to the top as I want it to. This unfortunately only works for that single page and not the entire website. What am I doing wrong?
are you using sticky header?
@@cameliafilip9665yes I am using sticky header. When I deactivate the sticky header, it does work. But I’d like to keep the sticky header. Any idea on a work around? I appreciate your input. Thank you.
@@coolestnerdever2128 If you apply the anchor to the header section, it won't work because once you make a header sticky, it will follow you down the page. So the header is already lower than the top of the page.
What you need to do is created another section that won't be sticky on top of the header section. That will contain the anchor. Make it's height 0px so that it will be hidden. Save and try again.
@@cameliafilip makes sense. Thank you so much. It worked! Unfortunately without linking it to the header it only works on one page. Any chance of getting it to work on all pages? Or will I need to set this up on each individual page?
@@coolestnerdever2128 put it in the header :)
I set it up exactly according to the tutorial, but when I click the button, it instantly changes to the top, there is no scrolling process, anyone can help me with that?
you can simple put the link as #top instead of adding an ID, it will automatically scroll to the top
Thanks so much man! I used your tip and it made it all the way easier. (I'm new to this website building thing :) )
I never added the back to op button on my page. No idea how it got there and I cant find it anywhere - I cant remove it!!
Some themes have it built in, like OceanWP
@@colinh2203 no, I'm using a template that is completely blank. I forget the name, but it doesn't matter... This button for not exist before. Then suddenly it appeared. Never updated anything. And it's barely visible and I can't even change the color even if I wanted to. It's also randomly behind some layers
Where and how to paste it on footer
Anywhere within the section.
The most important part to me was to it appear just in the footer of the page, sorry but I didn't find this to do here
Scrolls slowly and in small increments.
if your header is sticky, that's what will happen. What I did was add another section to my header (below the sticky section) and added the 'scrollup' ID to that section instead. Then I set margin/padding to 0, columns gap to No Gap and outer section padding to No Padding.
@@Designyourownblog It WORKS. Thank you man!
doesn't work ):
Thanks!
When I click on the arrow it only moves up slightly. I'd need to click on it over 100 times to get it to the top. How do I fix this?
Do you have a sticky header? If so, you need to set your anchor point in a new section above your header.