<div id="fullview">
      <div id="section1" class="active" data-tooltip="Section 1 Title">
        <h2>Section 1</h2>
        <button title="Down" id="down"><span>Click Here</span></button>
      </div>
      <div id="section2" data-tooltip="Section 2 Title">
        <h2>Section 2</h2>
        <div class="form">
          <form>
            <label for="select">Choose Section To Scroll</label>
            <select name="section" id="select">
              <option value="0">Section: 1</option>
              <option value="1">Section: 2</option>
              <option value="2">Section: 3</option>
              <option value="3">Section: 4</option>
            </select>
          </form>
        </div>
      </div>
      <div id="section3" data-tooltip="Section 3 Title">
        <h2>Section 3</h2>
      </div>
      <div id="section4" data-tooltip="Section 4 Title">
        <h2>Section 4</h2>
      </div>
    </div>

body {
  font-family: "Open Sans", sans-serif;
  color: #333;
  background: #ececec;
}

#fullview > div {
  background-color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.688rem;
  flex-direction: column;
  padding: 25px;
}

#fullview > div:nth-child(even) {
  background-color: #282c34;
  color: #ffffff;
}

#fullview h2 {
  margin: auto;
  width: 50%;
  text-align: center;
}

button {
  cursor: pointer;
  margin-right: 0;
  margin-bottom: 0;
}

select,
input, button {
  display: inline-block;
  padding: 8px 17px;
  background-color: #ffffff;
  box-shadow: 0px 2px 9px #888;
  border: 1px solid transparent;
}

#down {
  box-shadow: 0px 2px 9px #888;
}

form {
  display: flex;
  flex-direction: column;
}

form label {
  font-size: 1rem;
  margin-bottom: 5px;
}

/* Override Styles */
#fv-dots ul li a span {
  background-color: #888888;
  border-radius: 0;
  transition: all 0.5s ease;
}

#fv-dots ul a.active span {
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background-color: #bdbdbd;
}

$(document).ready(function () {
  var fv = $("#fullview").fullView({
    //Navigation
    dots: true,
    dotsPosition: "right",
    dotsTooltips: true,

    //Scrolling
    easing: "swing",
    backToTop: true,

    // Accessibility
    keyboardScrolling: true,

    // Callback
    onScrollEnd: function (currentView, preView) {
      console.log("Current", currentView);
      console.log("Previus", preView);
    }
  });

  $("#down").click(function () {
    // To Scroll Down 1 Section
    fv.data("fullView").scrollDown();

    // To Scroll Up 1 Section
    // fv.data('fullView').scrollDown();
  });

  $("#select").change(function () {
    // To Scroll to Specfic Section
    fv.data("fullView").scrollTo($(this).val());
  });
});