JSFiddle - React, Tailwind, and code Playground

by Mehmet Demiray

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
    <div class="content">
    <div id="left">
      <a href="#about" class="btn">About</a>
      <a href="#contact" class="btn">Contact</a>
    </div>
    <div id="right">
      <div id="about">
        <h1>About</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique animi nihil aspernatur quae suscipit maiores asperiores dolor dicta doloribus, facilis quas, cum. Eveniet, debitis alias quae beatae veritatis expedita assumenda voluptatem, maxime autem sunt vero velit eum, facilis illum magni neque soluta exercitationem. Odio distinctio incidunt ratione fugiat dicta non qui officia, obcaecati, ea cumque iusto quam et, accusantium unde eaque similique in! Eveniet culpa hic illo asperiores possimus itaque dolorem sapiente minima praesentium esse odio, illum beatae, voluptatem at error quo quisquam harum. Aut culpa ipsum soluta et in facere deserunt cum. Aliquam quis voluptatem laborum voluptatibus inventore ut optio, ad, ducimus harum maiores laboriosam ratione temporibus aut, ipsum ullam minima excepturi nisi aspernatur in repellat aperiam. Praesentium ea laborum corporis, voluptates earum tempora et ipsa quibusdam dolores amet nihil autem nisi, explicabo accusantium. Eos fugit aut eveniet eum expedita nihil aliquam ipsum voluptatem minus, nam officiis praesentium neque consectetur a, eius corporis repellat laborum dignissimos doloribus itaque ullam distinctio, dolorem rerum libero cum! Ducimus labore, unde eos nulla modi placeat consequatur aliquid vero in dolore eum, deserunt quas iure sapiente repellat, libero provident beatae necessitatibus asperiores aspernatur sunt mollitia suscipit adipisci! Non cupiditate ea quae, quia? Harum doloremque vitae dicta officia molestias a inventore sequi, minus tenetur perferendis. Odio sit ad nostrum labore, dolorem dolores iusto, recusandae quidem blanditiis? Error modi accusamus ratione...

CSS

.content {
  height: 100%;
}
#left,
#right {
  position: fixed;
  height: 100%;
}
#left {
  width: 50%;
}
#right {
  width: 50%;
  right: 0;
  background: #efefef;
  overflow-y: auto;
}

@media screen and (max-width: 500px) {
    #left {
        position: relative;
        width: calc(100% - 70px);
        height: 100%;
    }
    #right {
        width: 100%;
        position: relative;
        overflow: hidden;
        left: 0;
        height: auto;
    }

}

JavaScript

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length && offsetDiv > 1) {
				if($(window).width() > 500){
           $('#right').stop().animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }else {
          $('html,body').stop().animate({
            scrollTop: target.offset().top
          }, 1000);
          return false;
        }
      }
    }
  });
});