How to create an HTML button that acts like a link to an item on the same page?

I would like to create an HTML button that acts like a link to an item on the same page. So, when you click the button, it redirects to item on the same page.

How can I do this? (I would limit the solution to HTML, CSS, and JavaScript, because currently I am not using any other language)

Current Button (Bootstrap):

Democracy

Answer

This is assuming that you are not talking about scrolling down to a regular anchor, and instead you want to scroll to actual HTML elements on the page.

I'm not sure if jQuery counts for you, but if you're using Bootstrap, I imagine it does. If so, you can bind to the "click" event for your button and put some javascript code there to handle the scrolling. Typically you might associate the link/button with the element you want to scroll to using a "data" attribute (e.g. data-scroll="my-element-id").

Without jQuery, you'll have to make a function that contains the code as described, and put in an onclick attribute that references your function, and passes "this" as a parameter to your function, so you can get the reference to the link/button element that called it.

For the code to use to actually scroll to the corresponding element, check out this article:

How to go to a specific element on page?

Quick example without jQuery:

 onchange="scrollto(this);">something on page

scrolls to here when you click on the link above

With jQuery:

something on page

scrolls to here when you click on the link above

Note: If you literally want a "button" rather than a "link", you can really use any element and make that clickable, e.g.: