Hi there!
I’m trying to implement two page section links on the same page, but somehow they are not working. These two links are in the menu, Abningstider and Kontakt. Funny thing is that all the rest of the links in the menu are working (I’m using linking straight to the page, but not to the section.) My guess is that this happens since I’ve added custom code, which brings body overflow:auto when the the menu link is clicked, but that’s a cold guess…
I’d love any kind of feedback, thanks!
From the homepage, in the designer with Preview on, Abningstider and Kontakt anchor links work well for me.
They’re both empty, unstyled elements so… Put something inside of them and it will probably work. Where are the IDs set? I can’t find them.
I see that the first is inside of a grid element.
prefer putting the IDS on more general elements, such as the section itself.
I fear that didn’t change a thing - I’ve added some images but on the published page it doesn’t work anyways
I’ve moved ID’s to the div blocks with images straight above the footer. Nothing changed - I can see the url’s changing but it doesn’t scroll
interesting. Can you change the ID name to something else, try with “target” for example. Sorry I can’t test that by myself as I can’t publish the site.
Also test#2, please put a link in your header with the anchor link. And see if it works. So we can see it the fact that your anchor links are inside of a panel that is driven by interaction is in the way. I suspect it it.
You have hand crafted your menu from scratch. You cold have used a Webflow menu element too I think, and maybe it would have worked. I think maybe once published, your click on the menu item is catched by the IX to close the menu, and the anchor don’t work for that reason.
@Jekaterina_Aleksejev I propose a solution using Webflow navbar component. Here’s a video showing how to make it, you’ll have some more styling to do o the menu itself but you should understand the principle:
Changing ID’s name wasn’t successful… If you look now in the menu section I’ve moved two div blocks inside, with the position:absolute and down the page with -300VH & -400VH for those two elements… It still doesn’t scroll down…
Question regarding the possibility that the click is catched by the close interaction - would it be the same then for all menu links? If you click on ‘Forside’ or ‘Om os’ the link is working, and page is redirecting. Other category links work as well. Looks like it’s only the page section link that is bugging
It could but anchors and links are very different and browsers don’t handle them the same (anchors has some behavior with delay and smooth scroll). Check my video above and I think that will solve your issues.
Thanks for the video, I will give it a go!
The reason I’ve made custom menu because it had to overflow the whole screen (90%) and when clicked should stop body from scrolling… My previous attempts to do that with webflow navbar were not successful, and that’s why I have it made custom…
For example, on this same page the scroll to top button is made with an anchor link, and it works even though it’s made from within the symbol.
I will check out the video and give the update here in case it works. Thanks a lot for your help! 
Anytime.
( The scroll to top button doesn’t work for me 
)
Also, inside of a symbol is fine, symbols don’t subsist in publish, they’re just divs. Problem is inside of an element catching a click for IX.
Blocking the scroll when opening a modal is a very frequent request. There are JS solutions and there is one CSS only solution. I have that on my list, to produce a demo for Webflow, but still haven’t done it.
Preventing bodyscroll usually is needed when the modal itself is scrollable, I don’t know what your need here really is.
Anyway, here the source for the CSS only technique I was talking above: http://luxiyalu.com/scrolling-on-overlay/ maybe you can mix this technique and my navbar technique and make exactly what you want.
Hi again!
I checked the link http://luxiyalu.com/scrolling-on-overlay/ and on Mozilla, Chrome and Edge and the body is still scrollable, it’s a bit dubious if it will work…
I’ve tried your approach to create a menu, an ran into several problems:
even though Webflow provides custom design setting to Menu Button (open/close), it is not possible to track the open/close state of the menu itself, therefore I couldn’t find a way to control body overflow from the designer when the menu is activated (did I miss something?..);
the Menu Button, even though it has two states (open/close), is still treated as one element - it is not possible to assign both overflow hidden and auto (at least not for me)
Webflow.push(function() {
$(".menu-button-2").click(function(e) {
e.preventDefault();
$("body").css("overflow", "hidden");
});
$(".menu-button-2").click(function(e) {
e.preventDefault();
$("body").css("overflow", "auto");
});
});
I’ve made a try to create two divs’ inside Menu Button, to target them each separately, but then, when the menu is open (button is clicked and body is overflow:hidden), section links do not work, because the body doesn’t scroll. Assigning to the section link(.menu-link) the same code as to the button
$(".menu-link").click(function(e) {
e.preventDefault();
$("body").css("overflow", "auto");
});
});
folds the menu and doesn’t scroll.
At this point it looks reasonable to choose - section links or preventing body from scrolling, as with the existing setting I can’t get my head around this behavior… It is a bit disappointing…
If you’re curious as to what I’ve got, here is the link to the page:
https://kloster.webflow.io/home-menu-new
Cheers!
Katya
Hey thanks for letting me know, this is definitely interesting.
And I hadn’t tested the browser compatibility of my scrolling structure… thanks again.
