Hey guys,
I’d like to have a few full height sections and a fixed arrows (up and down) navigation in the lower right corner. I want the page to scroll one section up when I click arrow up and one section down when I click arrow down.
Is it possible in Webflow without custom code? Maybe some hacking with Interactions?
How would I go about making something like this?
Have a great day,
Adrian
Hi, please post your read-only link… and provide the community an example site to give all a point of reference.
This is the link to the site - https://preview.webflow.com/preview/fenster-piast?preview=2e6cb4daeea7902f5bb75144f7a888dc
What I want to achieve is this - click on the up or down arrow and the page scrolls one section up or down.
The only idea I have is this - make the arrows div in every section instead of only 1 for entire page and make it disappear from one section when scrolling and appear in another section and so on. Then there would be no reason to have them scroll one section up/down because I could just specify exact ids I want them to scroll to.
But I hope there’s a way of doing it with only one arrows div for entire page.
I don’t really have an example site to show.
I think I understand what you’re trying to achieve. In each section you want to have arrows to target the sections below and above.
Arrow #1 (Down) = targets the section below
Arrow #2 (Up) = targets section above
Now these arrows can be a little disruptive to your design, so I would make them show when the mouse hovers over - the right part of the screen. Is that what you’re looking for?
Thanks for your time and insights.
I would like to do something like this with ONLY ONE arrows div (fixed position) for entire page. So without placing this div in every section.
I can’t think of the way to do it.
So I think I’m left with placing one arrows div in every section and targeting the id of section above and below. Well, it’s not so bad I guess.
Have a nice day 
Ahhh I see. Well the challenge with that is; you can only have 1 interaction per element anyway. So there would need to be a ‘Click Trigger’ on the button, that says; 1st click - go there, 2nd click - go here, and so on. If that’s what you want, I haven’t found a way in WF yet…
Uh wait… oh I just thought of it… yes you could maybe 
Give me a sec… I’m in your read-only testing an option. I’ll hit you back when I try this.
I looked at, and the best way to do this, would be similar to @vincent sanbox site:
https://sab.webflow.io/vertical-dot-menu#sec04
On the vertical dots, I suggest adding a hover over the dots, that creates a flyout of that section with name:
Any other way, if you add 8, 9, 10 sections, an arrow wouldn’t allow the user to know where their desired section is?? With this setup, users can hover over “color-coded” dot navigation, and get a fly with section name; now it’s easy for them to experience the page. Of course, they can use scroll bar as well.
This would be my suggestion is you’re going for sticky side bar navigation. Color code + Flyout Name!
The block down / up arrows is tough to create, because the complicated hide/show and show another block. You would basically have to create many arrows, like 2 for each section. Man, this wouldn’t be fun at all.
Waow Gary I forgot about that page 
glad this site is still helpful
The flyout label is definitely a great visual bit.
For the arrow, can’t you have a fixed arrow that gets covered by a higher z-indexed transparent div trigger? See what I mean? Looks so real, is so fake, works so well…
Yeah that is a fabulous collection! Dude, when I first started with Webflow this year, I lived on your site 
It is awesome!!
Well I tested absolutely stacked arrows. But the problem is; he only wants 1 sticky fixed arrow nav block, not multiple arrow nav blocks per section. In that case, stacking them means, 1 arrow hidden for down, 1 arrow hidden for up, 1 arrow visible for section. And he’d need that for … what… 7 sections I think he has. Then you can only have on interaction per element, so dang, what is that? Like 21 interactions just to simply show a “scroll to section” effect. I’m thinking that’s overkill, especially when there’s a effective nav that you’ve already created - And he can clone it.
Just my take on it. You may have an idea he could use. Sorry @adryan, I think the ‘Graphic’ shown is best/easiest method to get the sticky/scroll to section effect, without coding it by hand.
Oh yeah, about that, the overdue rent… ;p
Hey,
Thanks again for your time!
Unfortunately the design of the site is not up to me. I just have to code it from psd…
So I will just create the div with arrows in every section and target ids of section below and above.
Once again thanks and have a great day!
Hahah… 
I’m sorry I was star-struck and couldn’t focus! Checksinthemail.
About the design, okay I see. If that’s the case, you don’t need to code it by hand, it’s not that hard. Initially, you wanted only 1 arrow block for all the sections - fixed to the right. If you don’t mind having arrows in each section, that is pretty straightforward.
Hi guys!
is possible to make that one section change on one scroll?
In your example is possible to navigate with dots on the right side, but is possible to make that next section switches when starting scroll?
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
