Hi!
I’m working on a site that needs to have a button which moves the screen downwards to the next section each time it’s clicked.
You should be able to see an example of it here: https://preview.webflow.com/preview/eviltwin2?preview=88a7948850a540f386dcff03f965607c (it’s the red circular div with a white arrow in a fixed position near the bottom of the screen!)
I’m quite new to Webflow, so I don’t really know how to insert any Javascript!
Any help would be very much appreciated!
A
An easy way to do this, is just swap out your “New Button” div with a “Link Block” and give it the same class as your button. And add in the SVG. 
Then from there, make sure that the next section has a name, and then click on your new link block (the arrow button), and go to settings and tell it which section to go to.
Instead of having your button in the “Fixed” position, change it to “Absolute” so that it stays in that section. Then add a new button in each section, same styling/class should do the trick (might need to add a 1, 2 or 3 onto the class for the progression).
Do the same thing to your button at the bottom (add in a link block instead with the same class), and change it to link to the top section.
Lovely site! Have fun! 
Tweet me if you have any questions please
Hi Waldo,
Thanks for helping, and I’m really glad you like the layout.
The method you’ve described is quite similar to what I tried initially, and I had real trouble positioning the button using ‘absolute’ in each section. For some reason, the button made other parts of the layout mess up quite badly!
I ended up using fixed positioning just to get the button to stay still and then realised I quite like it in that position…
Easy Peasy, all you need to do is the following.
Add in a div block here:
I called it “Absolute Arrow”, then put the following settings on that div:
Then drag your “newButton” into the “Absolute Arrow” div, and remember to make the “newButton” a “Link Block” instead (just click on the “newButton” element, then add “Link Block” and give it the “newButton” class, and add in your arrow svg) .
Make these changes on your “newButton”
And then just repeat the steps for each section Let me know if you have any other questions please, would love to see the site when it’s done as well.
Thanks,
Waldo
Waldo, you are an absolute superstar!
If you look at http://eviltwin2.webflow.io/ you should see the button in action
A
That looks fantastic!!! Such a lovely site
My pleasure to help
It looks like you need to adjust the z-index on some of your pieces as well, like the slider and form to make sure that you can still interact with those elements. Also don’t forget to change your favicon in the settings 
Let me know if you have any questions please, and I think it helps my rankings if you favorite/like any helpful hints I provide, would always appreciate those
Here we go,
Change the following on “AbsoluteArrow” class:
position: absolute;
z-index: 1;
display: inline-block;
width: 100%;
height: 20%;
bottom: 10%; (this is in the positioning part) (screen shot below)
Hi Waldo
Thanks again for your help with this.
Unfortunately, when I feed in those settings, all of the buttons collect in the top section!
Right!
I think I’ve fixed it
I’ve made the absoluteArrow class 60px wide and set the text-align of the containing div to centre and that seems to have fixed it with the slideshow working as well!
Nice work! Glad you were able to fix it
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
