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 () {
    // Hint: in this implementation you even don't need to specify a class and write
    // "$('a').click(function( oEvent ) {" instead
    $('a').click(function (oEvent) {
        var id = $(this).attr('href'),
            $target = $(id);
        if ($target.length && $(window).width() < 501) { // check if there is a valid target first @Hint
            oEvent.preventDefault(); // Prevent default behavior of link
            $('html,body').animate({
                scrollTop: $target.offset().top
            }, 'slow');
            // return false prevents event from bubbling which isn't a good practice
        } else if ($target.length) {
            oEvent.preventDefault(); // Prevent default behavior of link
            $('#right').animate({
                scrollTop: $target.offset().top
            }, 'slow');
            // return false prevents event from bubbling which isn't a good practice
        }
    });
});