Tip: No need to add an id to a section. Just set the button link as #top and that will always scroll to the top of the page. This will solve any issues like sticky headers etc.
Love all your Bricks vids. So helpful. Thank you! I did the button etc...all followed but when I tested it...nothing happened. I am wkg this on a staging site. Current site uses a diff builder. Could this be the conflict? It shouldn't right? Trying to figure out why it won't scroll up and connect to the topsection link
Thank you! I was trying to figure this out. Someone else posted another option with Javascript, but this is better. I added my button to the Footer instead of the Header, though. But still added the anchor in the header.
I would like to highlight that on the icon you can set "Link, External url, URL = #" which does the same function. The reason I needed this, because if you have an overlay menubar the process in the video is not working. Great video by the way, thanks!
Great solution, only issue is my website uses a sticky header so when you do it with a Universal Header thats sticky it just scrolls exactly to where the header is on your page, so you go nowhere.. know how to fix?
Hi Imran, thank you on your tutorial - it is working in bricks but how do you prevent the scrolltop id (with the hash tag) to be in the url ? when i clicked on the button the id show up in the url (and i want to prevent this) - thank you 😊
@@websquadron Exactly as you explain in the tutorial - i give id to the first section (in my case this is the Hero) a name i call it "scrolltotop" and for the button i choose from drop down - dynamic data and i wrote "#scrolltotop" , and after i was found that i needed to toggle on in the bricks settings "css - smooth scroling" this is worked but i see the #scrolltotop in the url ... what i missed up Although all ? 🤔 thank you 🙏
Hi Imran,thank you for your reply, if may i - i was send to you a massage in the Facebook chat with a link to youtube that i was record of the problem, thank you 🙏🏼
Hello! thanks for the tutorial. I have only one problem, when I press the button it takes me to the section automatically, that is, it does not scroll to get there. How could I fix it or what am I doing wrong? Thank you
Another great tutorial. However, not quite perfect. Because it would be nicer if the button only appears when you scroll down. Only then does its existence make sense. Let's see how I can do that.
Another flawed solution, you can do better! Are you going to create a back to top button for each page? also the solution in the footer has problems as well: if you make the footer sticky of fixed it no longer works!!
Thank You, Imran. I certainly appreciate your timeliness with this and your responsiveness to viewers!
My pleasure!
Thanks Imran. I like this approach much better than a sticky header or the header showing up when a visitor scrolls up. This seems more elegant to me.
Glad you like it!
Great tip! I used to put a complete URL with the ID!
Tip: No need to add an id to a section. Just set the button link as #top and that will always scroll to the top of the page. This will solve any issues like sticky headers etc.
many thanks that is exactly what i was looking for :)
A good reason for Bricks to add support for hooks within the theme and/or allow users to add hooks to their templates.
Great video man.
Was following a tutorial on UA-cam and an older version of Bricks had 'Section' in the Link Type dropdown box. Thanks for the quick video :)
Love all your Bricks vids. So helpful. Thank you! I did the button etc...all followed but when I tested it...nothing happened. I am wkg this on a staging site. Current site uses a diff builder. Could this be the conflict? It shouldn't right? Trying to figure out why it won't scroll up and connect to the topsection link
Hi Imran, is there a way to fade in AND fade out on page scroll, so it only becomes visual when scrolling down the page... It's easy in Elementor :-/
I need to dig deeper into this
@@websquadron thank you :)
Thank you! I was trying to figure this out. Someone else posted another option with Javascript, but this is better. I added my button to the Footer instead of the Header, though. But still added the anchor in the header.
Awesome :)
Awesome. Thank you. I am curious if Bricks Builder would be your website builder if you had to choose.
I jump between the 2 but am preferring Elementor especially with websites that get handed over to clients.
I would like to highlight that on the icon you can set "Link, External url, URL = #" which does the same function. The reason I needed this, because if you have an overlay menubar the process in the video is not working. Great video by the way, thanks!
Great tip!
Thanks for the tip. It solved my issue 😃
Great solution, only issue is my website uses a sticky header so when you do it with a Universal Header thats sticky it just scrolls exactly to where the header is on your page, so you go nowhere.. know how to fix?
Use #top as the button link, that will always scroll to the top of the page
@@DenisMcCaul will give it a try, thanks 👍👍
Thanks!!
Nice! Could we have a tutorial on how to add fade-in animations on an element with custom CSS? I'm sure a lot of people would be interested.
Are you thinking of fade-in as you scroll down the page? Bricks does have those effects to save using Custom CSS.
@@websquadron Yes! Or upon loading a page. I couldn't find anything about it in the Bricks documentation.
@@Magic_carpet666 I'll double-check on that.
hey bro i just want to sort my desired products to show on top in product page i'm elementor pro but there is no option can you help me with this
Modify the dates in products and then sort them.
Hi Imran, thank you on your tutorial - it is working in bricks but how do you prevent the scrolltop id (with the hash tag) to be in the url ? when i clicked on the button the id show up in the url (and i want to prevent this) - thank you 😊
What are you using for the permalink?
@@websquadron Exactly as you explain in the tutorial - i give id to the first section (in my case this is the Hero) a name i call it "scrolltotop" and for the button i choose from drop down - dynamic data and i wrote "#scrolltotop" , and after i was found that i needed to toggle on in the bricks settings "css - smooth scroling" this is worked but i see the #scrolltotop in the url ... what i missed up Although all ? 🤔 thank you 🙏
Again,. difficult to be sure without seeing it. I could spend time speculating but it might not help you or me. @@gershond1545
Hi Imran,thank you for your reply, if may i - i was send to you a massage in the Facebook chat with a link to youtube that i was record of the problem, thank you 🙏🏼
Can you please make a tut for default wp templates (all the pages we need, like search result, 404, blog index, and so on). Thanks!
I’ll consider it
this will work if your header is sticky?
Yes but you may need to offset.
@@websquadron Hi Imran, how could I set this offset?
Hmmmm... I did it exactly like this but it does not work - any idea why?
Hello! thanks for the tutorial. I have only one problem, when I press the button it takes me to the section automatically, that is, it does not scroll to get there. How could I fix it or what am I doing wrong?
Thank you
Does it scroll too quickly? Also what happens when you view on a live site?
Hi, I have the same problem, you can brick builders - settings - smooth scroll, turn on this button, and it will work.
@@lilyren5206 hello! Yes, I was able to solve it with these steps
How would I do something like “Go to the next section”
With a menu anchor but then you need it to become sequential and that will require JS
Another great tutorial. However, not quite perfect. Because it would be nicer if the button only appears when you scroll down. Only then does its existence make sense. Let's see how I can do that.
Yup, could add in some fade-in effect that offsets from the top.
Another flawed solution, you can do better! Are you going to create a back to top button for each page? also the solution in the footer has problems as well: if you make the footer sticky of fixed it no longer works!!
How is it flawed? You could add it to the header template and it will always work. Take care.