Quick Bricks Tip #01: Same Page Scrolling Anchor Link

[@DaveFoy]

Have a suggestion for a quick Bricks tip? Let me know in the comments. 🙏 My free Bricks masterclass: davefoy.link/bricks-masterclass

[@danielaldea]

I tried to register two times, but never get the email :( I don't know why, because I receive other emails from you...

[@thierry-leadway]

Hi Dave, quick tip on this specific video, courtesy of Matt Hias (Uncle... you know): Make sure in Bricks settings > General > Miscellaneous; that "Add element ID as needed" is not enabled! Or it won't work.

[@DaveFoy]

@@thierry-leadway Ah, right. I never enable that anyway. That stops you being able to set an ID on an element (e.g. #contact, #about, etc) and use it in a link?

[@thierry-leadway]

@@DaveFoy Well yes, i actually discovered that yesterday. 🙈

[@DaveFoy]

@@thierry-leadway Ah. I've never enabled that. I see it removes the automatic Bricks IDs in the HTML. Good tip, thanks! I never use those for linking anyway, I'd always create my own IDs that make more sense, like #contact, #about, etc. They're easier to understand what's going on and look nicer in URLs.

[@Gearyco]

Should we petition Bricks to rename "external URL" to "Custom URL" ?

[@DaveFoy]

Good idea. I've filed it under 'weird stuff in Bricks'... it's not a short list...

[@poubelly]

YES!

[@Simon-sly]

@@DaveFoygreat. Where did you post it? Can we up vote it?

[@derekshort]

Yes

[@tomiastudio]

I'm so glad I've watched this video Dave! I haven't had to link anything within a page in Bricks yet, but I would have never guessed that "smooth scroll" had to be turned on for this to work. Keep the tips coming! 👌🏻

[@DaveFoy]

I will! Thanks for that. :)

[@GeertBonamie]

As is, this is currently not working anymore -unless I'm missing something. In the meantime, external link has become "custom URL" en when you paste an ID in the URL field, it generates something like "[whatever-page-you're-on]/#brxe-123465", which is clearly not what it's supposed to be.

[@litmol]

I love the concept of short-highly useful tutorials! Thank you, Dave, for this tutorial. Can you kindly help me with the following issue? When clicking the link, it won’t scroll to the top of the section but rather ~100px bellow the top of the section (which takes the heading at the top of the section out of the visible area). Any idea what might be causing it?

[@alfanur_rizal]

"smooth scroll" thats what iam looking for,, thank you Dave,,

[@DaveFoy]

Thanks man.

[@derekshort]

Dave, my man! You’ve done it again! Great video!

[@DaveFoy]

Thank you sir. Just a quickie this one. :)

[@natcreat9145]

Cool tip, Dave! Who woulda thunk it? Keep making weird Bricks enigmas knowable!

[@DaveFoy]

Yeah, Bricks has it's share of weird little enigmas, that's for sure. ;)

[@quickend01]

Very good tip, thank you!

[@philippepperell9951]

Very helpful, Dave, thank you.

[@DaveFoy]

Very welcome 🙏🏼

[@buntusdev-uf1kt]

Really helpful 👍

[@martinbuno3990]

Hi Dave, Thanks a lot for this video. Please, if I have a one pager and I want it to scroll directly to a specific section from the menu, how do I do that? I tried this tutorial but it didn't help. Thanks!

[@DaveFoy]

If you're using the standard Nav Menu element, then add custom links and add the # id there. If you're using the newer Nav Menu Nestable element, then in the Link elements choose external links and add the # id there. Does that help?

[@MustafaSheikh]

Super helpful. I am applying this on a Div with Html tag set to Link. It works, but it's instant, how can i make it smooth scroll to the #section please

[@DaveFoy]

Could you try wrapping that div with a div/block and linking to that instead?

[@joshandpaigemontgomery6608]

I really need to know how to link an Icon like my little FB icon. Adding short youtube videos to your website. And for the life of me, I can't figure out to make my images clickable so they can enlarge. Newby here 🙈 Your videos are SO helpful!

[@DaveFoy]

NICE! Thank you so much. Great ideas. 🙏

[@StnurTube]

Hello Dave, good tip, as always. Keep going! Is there any way to do the same but from a different page? For example, link my nav menu "contact" to the contact section on my homepage/landing page.

[@DaveFoy]

Thanks! Yeah, you’d just put the # ID of the contact section at the end of the URL to the home page. Like example.com/#contact

[@StnurTube]

Thank you, sir! Will try it.@@DaveFoy

[@Cragdaro]

hey, when you wanted to paste something, there was a list of elements in the clipboard. What programm or shortcut is this?

[@DaveFoy]

What time in the video is this?

[@matijasevictomislav]

Can we put it under dinamic data option? What's difference?

[@DaveFoy]

Well, dynamic data is an option in the link dropdown... but I can't think of a typical use case for this. Because you're targeting the ID of an element, you'd have to somehow be dynamically generating somewhere not only the ID of the element, but you'd also need to set the same ID on the element you want to scroll/link to.

[@nichalosaguirre5670]

My page just jumps directly to the section. It doesn't do that fast scroll like your example does. Do you have some setting turned on to achieve this?

[@DaveFoy]

It's in Bricks settings > General > Miscellaneous > Smooth scroll (CSS). Is yours enabled? I thought I'd mentioned that in the video (apologies if not).

[@derekshort]

Dave, I have a question. Are you using a new camera? The color looks odd, but it could be my TV. 🤔

[@DaveFoy]

No, same cam. I might have messed with the colour settings in my editor by accident. Not sure. In what way does it look odd?

[@derekshort]

@@DaveFoy The color is off. Lol

[@carlosp.1846]

works with an ID from another page?

[@DaveFoy]

Yes. Just link to the other page and put the ID on the end of the page link.

[@adamu6941]

Useful tip if you use a button, but doesn't seems to work for me if you want to use the wordpress menu way to build your menu...

[@DaveFoy]

You can still add an anchor link to a link in the WP menu. Just use a custom link and add the # ID of the section you want to link to to the end of it.

[@SherwinBohol-q8k]

how to add smooth scrolling effect?

[@DaveFoy]

@@SherwinBohol-q8k It smooth scrolls automatically. Is it not working for you?

[@SherwinBohol-q8k]

@@DaveFoy it ddnt work for me. After I click the button, it blinks to another section.

[@brendamcalpine1341]

0:11 Made me think of _Fox in Socks_ by Dr. Seuss. Did anyone else try to say "quick Bricks tips for Bricks beginners" three times fast?

[@DaveFoy]

I tripped over it myself a couple of times. Reckon that was take 3. 😂

[@brucewarner3577]

I could use a Quick Bricks tip on how to link to an anchor on another page. Cheers

[@DaveFoy]

Ah, you just create an external link and pop the # ID at the end of the link. Like example.com/about#cta - that'll go to the About page and then straight down to the section with an ID of 'cta'. Make sense?

[@brucewarner3577]

Hey! Thanks for the reply--and fast too! (I just upped my number of KZbin subscriptions by 17%). Yes, but I don't know much about non-relative links and what happens when I go from temp development area to final and using an actual domain name. I presume the hosting system will take of most of it, but wasn't confident about any static links I entered manually. Also, figured I might have to do that to every link in the header--and I presume losing my smooth scroll. So, I may try that down the road, but for now I just made it a single page website (I guess I forgot about the Policy Page--oh well, one additional header won't be bad). Cheers. @@DaveFoy

[@DaveFoy]

@@brucewarner3577 Ah, usually the migration from dev/staging server to live will rewrite all the URLs in your database anyway, including any you set in Bricks. It shouldn't be a problem. :)

[@brucewarner3577]

Thank again. Much appreciated!@@DaveFoy

[@karolmot7099]

Isn't it time to let some fresh Oxygen into this room?