Html href attribut for previous and next button in a one page site?

Question

i made a minimalist one page blog with html/css.

I want to add two button to go up (previous post) or down (next post) on a fixed side menu. I wonder witch attribut i have to give to the class "href", to move automatically up or down **in the same page **(and not to a specific anchor/another page).

Every solution are welcome ! Thank you :)

Answer 1

Doing it with anchors and href in a might not work. This should work for your solution, of course you need to add your own restraints. Clicking on a button will change the index to a list with all sections.

index.html

<button onclick="step(1)">next</button>
<button onclick="step(-1)">previous</button>

<h1 id="section1">Section 1</h1>
<h1 id="section2">Section 2</h1>

main.js

var current = 0;
var sections = ['section1', 'section2'];

function step(incr) {
    current += incr;
    window.location.href = '#'+sections[current];
}

You replace the anchor by using an increment on a click event.