JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="mobile">

  <p id="scrollTop"> <strong>I am on top</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate blanditiis enim praesentium nulla architecto quisquam mollitia, eaque et quaerat nostrum veniam ullam dignissimos. Autem eveniet ea reiciendis
    veniam dolorum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem saepe, aspernatur facere adipisci natus laudantium nostrum numquam, in officia quo commodi ad, laborum est nesciunt reprehenderit quibusdam rerum corporis exercitationem!Lorem
    ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis in fuga minus nobis ipsa, tenetur sapiente architecto maxime nulla ex sequi ducimus, quisquam velit perspiciatis vitae facilis recusandae. Fugit, corrupti.Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Ab ratione architecto velit libero eius at blanditiis necessitatibus officiis. Minus labore aperiam mollitia ab, earum velit qui aut vitae ipsam accusamus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias ad debitis
    accusantium aspernatur laborum, nesciunt, consectetur odit possimus illo beatae inventore, et labore atque voluptatum, minima ipsam eius ratione eaque. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum cupiditate blanditiis enim praesentium
    nulla architecto quisquam mollitia, eaque et quaerat nostrum veniam ullam dignissimos. Autem eveniet ea reiciendis veniam dolorum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem saepe, aspernatur facere adipisci natus laudantium nostrum
    numquam, in officia quo commodi ad, laborum est nesciunt reprehenderit quibusdam rerum corporis exercitationem!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis in fuga minus nobis ipsa, tenetur sapiente architecto maxime nulla
    ex sequi ducimus, quisquam velit perspiciatis vitae facilis recusandae. Fugit, corrupti.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ratione...

SCSS

* {
  box-sizing: border-box;
}

.mobile {
  background: #fff;
  padding: 30px;
  position: relative;

  p {
    font-size: 16px;
    line-height: 32px;

    strong {
      font-weight: 700;
      display: block;
      font-size: 20px;
    }
  }
}

.toggler {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: -150px;
  left: 50px;
  background: #ffcb11;
  outline: none;

  &.triggered {
    background: red;
  }
}

.footer {
  position: fixed;
  height: 30vh;
  width: 100%;
  left: 0;
  bottom: -30vh;
  background: #ffcb11;
  transition: all 1s ease-in-out;
}

.footer.active {
  bottom: 0;
}

JavaScript

// open close functionality for the bottom footer

$('.toggler').on('click', function() {

  if ($(this).hasClass('triggered')) {
    $(this).removeClass('triggered')
    $('.footer').removeClass('active');
    $('body').css('padding-bottom', '0px');

    $([document.documentElement, document.body]).animate({
      scrollTop: $("#scrollTop").offset().top
    }, 1000);
    
  } else {
  
    $(this).addClass('triggered')
    $('.footer').addClass('active');
    $('body').css('padding-bottom', $('.footer').height());
    $([document.documentElement, document.body]).animate({
      scrollTop: $("#scrollBottom").offset().top
    }, 1000);
  }
});