Using anchor links to go directly to a section - Webflow tutorial

[@hockeyspeed1459]

Didn't even need to watch the entire video to figure it out. Thank you for providing a quick solution!

[@Webflow]

You're most welcome!

[@dustinoverbeck]

For those wondering how to make the link not scroll past the actual section, the quickest thing I found was to create an empty DIV section above the expected destination. I then link to the ID named in the empty DIV. (I couldn't figure out the 'offset' thing somebody else had posted).

[@christopherdosin292]

Love these really short on the point videos!

[@JacobRankoMedia]

This was perfect. Thanks

[@DeepfriedBaby]

Jesus, these videos are good.

[@fredrikgehrke4209]

Hi, I'm using the TAB content. How do I link to something on a different TAB (on the same page). Ive tried with section ID but just scrolls up.. doesn't open that TAB...

[@mariogutierrez1019]

Perfect thnx, this video helped for my web design class

[@chrisleighcreative]

Very concise, thank you!

[@isaacola7596]

This is what i'm talking about. Quick. simple. stuff.

[@witxeynobre7306]

Simple and easy!

[@ThaisAcioly]

so simple and i was struggling so bad lol

[@y_social_]

so beautiful

[@NeeyamoLive]

Thank you so much!

[@jexusmedina3100]

Hi! I need your help. I have a web project with 3 pages. May you tell me how a Botton can be linked to a specific section of a different page? Sorry, my English is not good. Thank you.

[@Webflow]

Hi there, great question! Here's a tutorial on how to add links to sections on other pages: wfl.io/2tdOgzm. Hope this is helpful. If you have any other questions, please don't hesitate to reach out to us, and we'll be happy to help! You can reach out to our customer support team here: university.webflow.com/contact.

[@zinolequy]

Hi! I really need your help. I did everything that you guys showed in the video, but when I use the navigation button, it goes down a little too far. (It will slide down below the header of the section, and starts at the text) How can I fix it? Tried everything :(

[@raoulboelaars6198]

I'v the same problem right now, do you have by any chance found a solution to this? :)

[@aligator.martian]

+1 Similar issue but opposite, the page loads between sections, well above the desired section instead of the top or middle. Each section is set to be 100VH so that you are looking at just the desired content one section at a time. I did attempt the empty div option like @Juan Carvajal did as well, but then the "current" selector styling on the nav bar doesn't show up right. Any other solutions anyone?

[@kevinshen5079]

I need a Y offset like framer gives me.. my sticky navbar is covering my header at the moment...

[@lisaying1273]

Hey guys, I need help! I have create a "Symbol" - BACK TO TOP BUTTON, And try to use it in several pages. I named those page's first section's ID "TOP" And the results, after published, only the 1 page will work. (The last page) Don't know what happen? Is it because I can't make the button a Symbol?

[@alexundefeatedia]

thanks mate

[@jakobwinterholler1793]

Is it possible to disable the blue border around the target element when going to a page section? And good video!

[@Webflow]

Checkout our new video on using Outlines in Webflow. That should explain what you need to know. kzbin.info/www/bejne/n6qxZaSFmbllask

[@naini2580]

finally done this playlist asdf

[@CraigWrightStraygoat]

How do you do an anchor link in a blog post? Is there a way to add an ID to a heading in a blog post?

[@WonsPhreely]

So i got the first part - I made the ID for the section - but I want to use an image instead of a button for the second part. Anyone know how to do that? I select the image > go to settings > but I dont even have 'Link Settings' showing up in my settings panel? Thanks!

[@christophermyers2907]

You're gonna have to use a Link Block element and plop your image inside of it

[@savvase.9809]

Let’s say we have an accordion on a specific page and want to link a button on that page to a specific section of the accordion so that it opens to reveal the desired text. How can we do that?

[@zubbeyinno6438]

i love this web tool

[@dennisfernando9607]

How a give link for the previous page for the button with is in the CMS collection page

[@jerrymcneive]

Hi, Great video. I have a div block on my page with lots off copy...the block is set to overflow: auto. I’d like to link from sticky navigation to various points within this overflow div block. Is that possible? Thanks!

[@stefansarajlic6023]

When I do this I don't get the nice scrolling animation, it just instantly teleports to the part of the page I want it to go to. How do I fix this?

[@Lanman106]

For me it is scrolling too far past the anchor links and cutting off the headers of the sections. Does anyone know how to fix this?

[@maba1bboy]

I have also the same problem

[@imagefilms6510]

same here did you guys find a solution?

[@Lanman106]

@@imagefilms6510 I did not find a solution unfortunately. If I ever do I'll post it here.

[@imagefilms6510]

@@Lanman106 That helped me solve the Problem! You’ll see that in each of the sections, I have a div with the class “offsetfix” 100px (in desktop breakpoint) in height serving as the anchor, as the navbar is a set 100px. Hope this helps. EDIT for anyone reading: I forgot to mention the negative margin on the “offsetfix” div. preview.webflow.com/preview/bomber-county-minis?preview=76f28b0fd6307ac74ab6d7f393a61775&mode=preview 54

[@jakubhladik5898]

@@imagefilms6510 Thank you!!! This worked perfectly!!! For anyone doing this, make sure you label the ID of the "Margin Offset DIV". I was used to labelling only the Section so it didn't work at first. I didn't know you could add an ID to a Div. Awesome!

[@Yasmin-tj7tq]

Why when I scroll to the section, the color of the link changes? What can I do to disable this option?

[@clickryanG]

VONDerful, but how can we link to an anchor on a separate page? thxs

[@Webflow]

Hi there, great question! Here's a tutorial on how to add links to sections on other pages: wfl.io/2tdOgzm. Hope this is helpful.

[@goldenant9450]

can you link to a section like this, but from another page?

[@Webflow]

Hello! To do this, you want to copy the slug of the page that includes the section name (for example, “/page#section-name”) and paste it in the URL field inside the link settings. That way, when a user clicks on that link, it will take them to that page and that specific section. Be sure to update the URL if the page slug changes!

[@fionndebuitlear6407]

hello, can anyone help me ?? the link button is jumping to section and not scrolling? no idea why its doing this

[@slyasassin]

Same smdh

[@fionndebuitlear6407]

@@slyasassin so annoying isn’t it man, literally only started doing it yesterday

[@uragan247]

Same tbh, must be some recent update as this didnt happen to me like couple months ago. Anyone has a solution ?

[@cklai350]

Mine scrolled to the somewhere way above where it should be stopping at. The top of the correct section is exactly at the bottom of my screen, means I can't see the section at all. Does anyone know how to fix this?

[@Webflow]

You might need to make sure you're adding the section ID to the correct element. If you need further help, please reply back with a loom.com screen recorded video and your project's share link.

[@ChineduChidiebere]

I tried linking a text to my gmail, but it's not working... how can I solve this issue?

[@markiscoolms]

Is there a 'next' and 'previous' section, page option?

[@Webflow]

Hi Mark! Great question! It's possible to manually create next and previous links, but they would need to be created with section links, manually. It's often best practices for SEO to instead change the link text to match the section content (for example: "About" should link to the "About" section), otherwise "next" and "previous" buttons are best suited for pagination. Here is a guide on paginating collection lists which is possible in Webflow: university.webflow.com/lesson/paginate-collection-lists

[@MinnThitHlaing]

Can U Adjust The Speed?

[@Webflow]

You definitely can! Check out our micro lesson on how to do this → kzbin.info/www/bejne/e3qWcoKZqLRrodEfeature=shared&t=60

[@Bilugagamer]

I'm stuck with something. I can only use a button as a anchor link to go to a page section when it has an animation of Fade in. May you guyss help me with thatt???

[@Webflow]

Hey this is a great question that you can ask on the Webflow forum (forum.webflow.com/). Just post your question with as much information as possible (read-only link, screenshots and a description of the issue), and our amazing community and staff can help you there.

[@bonidom1]

@@Webflow how to use it in CMS?

[@creativeembargo]

@@bonidom1 That quiet hard to achieve. wishlist.webflow.com/ideas/WEBFLOW-I-301

[@crazywolf210897]

It just jumps to the section, not scroll smooth like that, how to fix it?

[@Webflow]

Hi Han, great question! It can depend upon which browser or device you're using when clicking anchor links. It sounds like this question may be specific to your Webflow site instance. Please contact us here with more details, our team is happy to help: university.webflow.com/support

[@jaimejimenez2886]

YES

[@pointq]

Great, except for me it doesn't smooth scroll to the section, it jumps to it. What's the secret to make it smooth scroll and not just blink over to the section?

[@Webflow]

Can you please provide a screen recording of what you're experiencing? You can use something like loom.com for this. Also, please provide your project's share link: university.webflow.com/lesson/share-your-site

[@juliagiantenaso4822]

@@Webflow I have the same problem. It doesn't smooth scroll to the section, it jumps to it.

[@ahhhwh]

me too its smooth on mac safari and chrome but not on windows firefox and chrome

[@bernhardneumann9684]

Did anyone get it to work on mobile?

[@Webflow]

Hi Bernhard! This should work on mobile, but perhaps there are some updates on a breakpoint causing an issue. It's difficult to troubleshoot it without a Read-Only link to your website. Could you please ask this question with a few more details on the Webflow Forum? forum.webflow.com/ That way our community can work together with you to find a solution.

[@markusb3218]

It's a shame it is out of date.