HTML button to scroll to a section in the webpage - html

Question

I have been given the task to edit a wordpress site that I did not create. I am not that familiar with wordpress or php but I have
been able to muddle through, but now I am stuck.
The webpage has a set of links within a <ul> that when you click on the links the page auto scrolls (smoothly) to the section in the website.
The <ul> looks like this.
<ul class="main-menu" id="main-menu">
<li id="menu-about_page">About</li>
<li id="menu-energy_page">Energy</li>
</ul>
The about link navigates to the about section which looks like this.
<div id="about_page" class="page-row">
<div class="page-wrap" id="about_page-wrap" alt="home_page">
<div class="clear"></div>
<div class="clear"></div>
<div class="container">
<div class="container-inner">
<?= get_page_slider('About Slider'); ?>
</div>
</div>
<div class="page-overlay"></div>
</div>
</div>
I want to replace the menu with a row of buttons (client request) that perform the same function. The code I have so far is shown below.
<div>
<button type="button" class="transparent_btn">About</button>
</div>
This doesnt work, what am I missing. I thought there maybe some fancy javascript controlling the scroll but as far as I can see in the code there isnt any.

Answer 1

You have to add the id of the section you want to scroll to:
<div>
<a href="#about_page">
<button type="button" class="transparent_btn">About</button>
</a>
</div>
P.D.
I would loose the button markup and style the link to look like a button.

Answer 2

Why not keep the current WP menu and functionality? It sounds like all you really need to do is style the menu to look like buttons. Since the markup isn't changed you won't need to get your hands messy in the WP templates and the existing scroll-to javascript will still work.
#main-menu {
list-style-type: none;
margin: 0;
padding: 0;
font-family: arial;
}
#main-menu li {
display: inline-block;
}
#main-menu li a {
display: inline-block;
padding: 0 1em;
line-height: 2em;
background: #2a96c3;
color: #fff;
text-decoration: none;
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.5);
box-shadow: inset 0px -1px 1px rgba(0, 0, 0, 0.5), inset 0px 1px 1px rgba(255, 255, 255, 0.5);
}
#main-menu li a:hover {
background: #ccc;
color: #000;
}
<ul class="main-menu" id="main-menu">
<li id="menu-about_page">About</li>
<li id="menu-energy_page">Energy</li>
</ul>

Answer 3

You have to add the id of the section you want to scroll to:
<div>
<a href="#about_page">
<button type="button" class="transparent_btn">About</button>
</a>
</div>
And use this javascript inside jquery code
$("a[href^='#']").on('click', function(e) {
// prevent default anchor click behavior
e.preventDefault();
// store hash
var hash = this.hash;
if (hash == "#top")
{
$('html, body').animate({
scrollTop: 0
}, 1000, function(){});
}else
{
$('html, body').animate({
scrollTop: $(hash).offset().top - 70
}, 1000, function(){});
}
});