Previous Next buttons on full bleed site

Design help General
1

I’m trying to fid a way to have a full bleed site that has an arrow at the top and bottom that moves to the next or previous section.

I have disabled scrolling by turning off overflow in body and set the Sections to 100 vh
I know I can add up and down arrows in each section then anchor link to each section manually. Thing is, I have over 30 sections and if I hard code every up and down button it makes changes impossible, also when the page scrolls I’d love it if the buttons stayed it place (i have them set to fixed on page so the button stays and the section scrolls underneath)

I can’t seem to find a way to have it scroll next/previous. Does anyone know of a custom code, or attribute or something I can apply that essentially does a
take current section and +1
or
take current section and -1

I’ve tried every workaround I could think of but have had no luck so I signed up for the forums.

Any help would be appreciated.

Here is my site Read-Only: https://preview.webflow.com/preview/honda-timeline?preview=f4dd6a5a180aa2ef2b98085ce740617b

2

Aoutch, I’m sure this will lead to more issues…

You should maybe consider using fullpage.js. It’s a slightly different experience but the result is almost the same and you don’t hack your Body element too much.

3

I tried it and got it working but is there a way using this code to make the buttons work? The up and down. A call to scroll up 1 or down 1?

6

Yes you can – just add the following script (remember to add your class):

<script>
$('.PUT_YOUR_CLASS_HERE').click(function(){
$.fn.fullpage.moveSectionDown(); 
});
$('.PUT_YOUR_CLASS_HERE').click(function(){
$.fn.fullpage.moveSectionUp(); 
});
</script>

You can also link directly to any section using a the following:

<script>
$(document).on('click', '#button', function(){
$.fn.fullpage.moveTo('4');
});
</script>

The above example will scroll to section 4 when an element with an ID of #button is clicked.

7

Thanks man! this is super helpful! Much appreciated!

8

Nice! I tried to implement this but it somehow doesn’t work.

Do I miss something?

(mobile portrait only)

My read only