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.

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?

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.

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

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

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

@UrielSoto

2 жыл бұрын

Thanks 🙏🏼

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

Excellent, clear video. Thank you!

perfect explanation and work flow! thank you!

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

Great work thanks, got it working first time

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

Nice and easy, thanks a lot!

So helpful, thank you!!!

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

Great tutorial! Thanks

Thanks!!! Very, very helpful!!

thanks man - very helpful!!!

Works perfect thanks

Thanks a million, man!

Awesome!! Thanks.

Great video thank you!

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

Great! Thank you!

Great tutorial. thanks. 🙂

Fabulous so easy thank you

Thanks!

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

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

Thank you!

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

thank you so much

this man just awesome

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

thank you sir

It helps me . Thank you.

@UrielSoto

Жыл бұрын

Glad to hear that

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

Very helpful - thank you.

@UrielSoto

3 жыл бұрын

Thanks appreciate it man

Thank you very much, very useful tutorial .

@UrielSoto

3 жыл бұрын

You're welcome! :)

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

Great.

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.

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

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.

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

very good you male my work easy dude

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 ?

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

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

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

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

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

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?

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

@UrielSoto

3 жыл бұрын

Yes

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

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

@UrielSoto

3 жыл бұрын

Yeah if you use the motion affects on scroll

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;

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 :)

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

@aymericzambo1914

10 ай бұрын

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

@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

Where and how to paste it on footer

@UrielSoto

3 жыл бұрын

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.

@Designyourownblog

2 жыл бұрын

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

2 жыл бұрын

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

@KristinPearson

2 жыл бұрын

Do you have a sticky header? If so, you need to set your anchor point in a new section above your header.