Use Bootstrap buttons to scroll to different areas

Issue

I've got 2 bootstrap buttons I need to be able to scroll down the page. One goes to one section, and the other goes to a section further down the page. What do I need to add to my <button> elements?

<ul>
  <div class="row">
    <div class="col-md-4">
      <li><button class="btn btn-block" style="margin-top: 5px;">Section1</button></li>
    </div>
    <div class="col-md-4">
      <li><button class="btn btn-block" style="margin-top: 5px;">Section2</button></li>
    </div>
  </div>
</ul>

I don't know Javascript at all, and I have minimal experience with jQuery.

Solution

This can be done with html. First, change your <button> tags to <a> tags

With the <a> tags, you can specify the href attribute as a div (or any element) to scroll to. So say you have an element:

<div id="scroll-target"></div>

You could rewrite your code as:

    <ul>
    <div class="row">
      <div class="col-md-4">
    <li><a href="#scroll-target" class="btn btn-block" style="margin-top: 5px;">Section1</button> </li>
      </div>
      <div class="col-md-4">
    <li><a href="#scroll-target" class="btn btn-block" style="margin-top: 5px;">Section2</button> </li>
        </div<
    </ul>

And clicking on the buttons should take you to the #scroll-target div.

Also, I'm fairly certain the bootstrap styles will work just as well on <a> tags as they do on <button> tags with the same classes ('btn', 'btn-sm', 'btn-primary', etc.).

Answered By - 01010011 01000010