Create A Back To Top Button On Elementor Free | Floating Scroll To Top ⬆️

No video

Create A Back To Top Button On Elementor Free | Floating Scroll To Top ⬆️

Рет қаралды 61,218

Күн бұрын

Create a floating scroll to top button on Elementor.
🔵 Join Our Facebook Community!
bit.ly/urielsot...
🟢 Tech Support:
urielsoto.com/...
🟢 My Web Agency:
vluxdesigns.com/
MY COURSES:
🟣 Elementor Mobile Responsive Course
bit.ly/element...
🟣 Website Building Factory Course
bit.ly/website...
PRODUCTS I USE FOR MY WEBSITES:
🔴 Get Elementor Pro - My Favorite Page Builder
bit.ly/urielele...
PRIVATE GROUP:
🔵 Join My Patreon & Get Design Downloads
bit.ly/uspatreon
CONTACT ME:
My Website: urielsoto.com/
Facebook: / urielsotodev
Linkedin: / uriel-soto-976b3117a
#elementor

Пікірлер: 97

@robketelaars4521 Жыл бұрын

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.

@Designyourownblog 3 жыл бұрын

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.

@KinottoIt Жыл бұрын

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.

@billyristuccia3621 Жыл бұрын

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?

@ngltbhimo Жыл бұрын

I've been toiling with this for the last 2 days. Your video let me do it in 20 min. Thank you so much

@P1CKUPTHEPACE 2 жыл бұрын

I have watched so many of your videos. All very helpful. Thank you Uriel

@Foz261 2 ай бұрын

Thank you so much for your explanation it is very clear.

@darkangel890 6 ай бұрын

Thank you, Uriel! This is easy to understand and very helpful.

@cameliafilip9665 Жыл бұрын

What if you use sticky header? It's not going to scroll up if the header stays while you scroll

@ashishrawal3484 2 жыл бұрын

Thanks Uriel. You have explained it quiet nicely.. Keep doing the good work. Million thanks !

@UrielSoto 2 жыл бұрын

Thanks 🙏🏼

@veronika.cvergaran.1181 Жыл бұрын

Gracias, vi varios tutoriales en español y ninguno me gustó, he realizado el tuyo con subtitulos y lo entendí perfectamente. Thanks.

@superMrsMaddox Жыл бұрын

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

@theresedaland6881 3 жыл бұрын

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?

@UrielSoto 3 жыл бұрын

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

@theresedaland6881 3 жыл бұрын

@@UrielSoto Thanks for your quick reply. Appreciate it. :)

@veronika.cvergaran.1181 3 ай бұрын

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

@heartcenteredmaria 2 ай бұрын

So helpful, thank you!!!

@chrisstone08 2 ай бұрын

thanks man - very helpful!!!

@geoffreyvanhulle5224 2 жыл бұрын

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

@elbouhamedyfaissal9556 Жыл бұрын

its' first time i see your video, thank you for simple tutorial bro i hope you have great day

@coolestnerdever2128 Жыл бұрын

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?

@siamislam8588 Жыл бұрын

It helps me . Thank you.

@UrielSoto Жыл бұрын

Glad to hear that

@user-mfsc-2024 8 ай бұрын

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 ?

@MistyCochran 3 жыл бұрын

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

@ohboy2118 2 жыл бұрын

I have the exact same issue but with all screen sizes. Has anyone fixed this? Using Elementor Pro 3.5.0

@MistyCochran 2 жыл бұрын

@@ohboy2118 I went with a different one

@nicopalmkvist 11 ай бұрын

Thanks!

@newtrinohair Жыл бұрын

Thank you so much Uriel! Great tutorial covers everything I needed. Really appreciate it

@miiqbal44 Жыл бұрын

thank you so much

@miriamcuevas6900 3 жыл бұрын

Excellent! I thought this was only possible with Elementor Pro. Thanks a lot!

@TheAutheticSmash Жыл бұрын

thank you sir

@KeriaArtJourney Жыл бұрын

is there a way to make the button disappear after a few seconds?

@deduice 3 жыл бұрын

Great! How do you make it disappear or fade while scrolling up?

@UrielSoto 3 жыл бұрын

Use your motion effect for a scroll fade.

@deduice 3 жыл бұрын

@@UrielSoto ok. Thanks

@BlackJacketJones 2 жыл бұрын

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.

@joeleung9687 Жыл бұрын

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.

@jocelynpatrick2823 2 жыл бұрын

Excellent, clear video. Thank you!

@erickthamara5154 2 жыл бұрын

Hey, thanks for the tutorial. My button works but it doesn't completely go all the way to the top. Please help?

@pt.mekartekniknusanraya1394 2 жыл бұрын

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

@adamthorntonillustration9281 2 жыл бұрын

Thanks very much indeed for this, Uriel. Really helpful!

@tareknnassar Жыл бұрын

you can simple put the link as #top instead of adding an ID, it will automatically scroll to the top

@aymericzambo1914 11 ай бұрын

Thanks so much man! I used your tip and it made it all the way easier. (I'm new to this website building thing :) )

@EduardoSanchez-tc8kd 2 жыл бұрын

Una consulta como configuro el botón para volver "atrás" .. ??

@joshreviewstech Жыл бұрын

Great video thank you!

@jenniferward6821 2 жыл бұрын

Fabulous so easy thank you

@dannydzenis3080 3 жыл бұрын

Very helpful...how did you check how response your site was

@peterobrien9643 2 жыл бұрын

Great work thanks, got it working first time

@Nistorakee1 2 жыл бұрын

perfect explanation and work flow! thank you!

@hlsgroupb.v.1297 2 жыл бұрын

Works perfect thanks

@goncalodias6988 2 жыл бұрын

Ma man, really helpfull video. Thank you very much !

@RaymundoLopez777 2 жыл бұрын

Great! Thank you!

@xx6875 Жыл бұрын

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?

@theroyz6600 3 жыл бұрын

Thanks for sharing; this one helped me a lot.

@luisenrique-vx5wk 2 жыл бұрын

Thanks a million, man!

@jonathanlike-uehara5663 2 жыл бұрын

Thanks Uriel! Is there a way to add a "Back to the Top" text above the arrow icon?

@UrielSoto 2 жыл бұрын

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;

@antonio0000x 2 жыл бұрын

Awesome!! Thanks.

@roboughtic 2 жыл бұрын

Great tutorial. thanks. 🙂

@teresadutari 2 жыл бұрын

Great tutorial! Thanks

@rivellerivetria 3 жыл бұрын

Thanks!!! Very, very helpful!!

@lukasjannemec8986 3 жыл бұрын

Hi thanks a lot, can I make it disappear when using Elementor Free?

@UrielSoto 3 жыл бұрын

Yeah if you use the motion affects on scroll

@rhythmbox2998 2 жыл бұрын

this man just awesome

@TonyFalcon76 2 жыл бұрын

Nice and easy, thanks a lot!

@cubingwithcarl4572 3 жыл бұрын

Thank you!

@prokassim 3 жыл бұрын

Thank you very much, very useful tutorial .

@UrielSoto 3 жыл бұрын

You're welcome! :)

@mediaiweb 3 жыл бұрын

i think scroll fade is only on pro cos i don't have scroll fade in the motion effect

@gerardpatrick8960 3 жыл бұрын

Very helpful - thank you.

@UrielSoto 3 жыл бұрын

Thanks appreciate it man

@DevPalliSri 3 жыл бұрын

Will scroll button work, if page header has position fixed? Thanks.

@UrielSoto 3 жыл бұрын

Yes

@thomasleb0ss 2 жыл бұрын

Thanks !! ❤

@coolestnerdever2128 2 жыл бұрын

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?

@cameliafilip9665 Жыл бұрын

are you using sticky header?

@coolestnerdever2128 Жыл бұрын

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

@cameliafilip Жыл бұрын

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

@coolestnerdever2128 Жыл бұрын

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

@cameliafilip Жыл бұрын

@@coolestnerdever2128 put it in the header :)

@muhammadshamim3836 3 жыл бұрын

Great.

@nihalmirshah3731 2 жыл бұрын

very good you male my work easy dude

@michaelfrymus 2 жыл бұрын

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

@colinh2203 2 жыл бұрын

Some themes have it built in, like OceanWP

@michaelfrymus 2 жыл бұрын

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

@MrE1981 3 жыл бұрын

Scrolls slowly and in small increments.

@Designyourownblog 3 жыл бұрын

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.

@eskerinola5845 3 жыл бұрын

@@Designyourownblog It WORKS. Thank you man!