I'm trying to make scrollable and clickable section but its scroll and onclick scroll not working

Question

please review below code as i want to make one side menu sticky and on right side its content will scroll and same can access through click on menu. I'm having an issues with active scrolling and onclick scroll.

<div class="section--150 wf-section">
    <div class="container w-container w-row scroll-container">
      <div class="navigation column-95 w-col w-col-6" id="mainNav">
        <a class="navigation__link scroll-title-div active" href="#1">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">What is</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#2">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Why you should choose?</h3>
        </a>
        <a class="navigation__link scroll-title-div" href="#3">
          <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg" alt="arrow-right-blue-sm">
          <h3 class="bottom-24 scroll-title">Process</h3>
        </a>
      </div>
      <div class="sub-scroll-div w-row">
        <div class="page-section hero w-col w-col-6 first-scroll-content forScrollJs" id="1">
          <div class="div-block-61" id="firstScrollTagContent">
            <h2 class="scroll-h2 medium">What is</h2>
            <p class="font---16">allowing them to build a great eCommerce experience.</p>
          </div>
        </div>
        <div class="page-section w-col w-col-6 second-scroll-content forScrollJs" id="2">
          <div class="div-block-61" id="secondScrollTagContent">
            <h2 class="scroll-h2 medium">Why you should choose?</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Responsive</h3>
              <p class="font---16">allowing them to build a great eCommerce experience.</p>
            </div>
            </div>
        </div>
        <div class="page-section w-col w-col-6 third-scroll-content forScrollJs" id="3">
          <div class="div-block-61" id="thirdScrollTagContent">
            <h2 class="scroll-h2 medium">Process</h2>
            <div class="scroll-content-div">
              <h3 class="font-25 medium">Understanding</h3>
              <p class="font---16">By discussing clients’ business goals and understanding the user needs and the
                problematic areas we’ll build strategies that serve both with No-code.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

CSS /* scrolling plug-in */

.scroll-container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .page-section { max-height: max-content; width: 100%; margin-bottom: 5%; } .sub-scroll-div { width: 50%; display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; align-items: center; } .first-scroll-content { margin-top: 0px; } .navigation { display: block; position: sticky; width: 50%; margin-bottom: auto; margin-right: auto; } .navigation__link { top: 39px; color: black; text-decoration: none; font-weight: 400; } .navigation__link:hover { color: #3f71ff; } .navigation__link.active { color: #3f71ff; } .navigation__link.active .active-blue-arrow { display: block; opacity: 1; }

script

$(document).ready(function() {
        $('.forScrollLink').bind('click', function(e) {
        console.log("clicked");
                e.preventDefault(); // prevent hard jump, the default behavior
                var target = $(this).attr("href"); // Set the target as variable
                $('html, body').stop().animate({
                        scrollTop: $(target).offset().top
                }, 500, function() {
                        location.hash = target; 
                });
                return false;
        });
  });
  $(window).scroll(function() {
      var scrollDistance = $(window).scrollTop();
      $('.page-section').each(function(i) {
          if ($(this).position().top <= scrollDistance) {
              $('.navigation a.active').removeClass('active');
              $('.navigation a').eq(i).addClass('active');
          }
      });
  }).scroll();

Help me to make it done..

Thanks in advance !!!

Answer 1

Below changes are made in J.script to make it functional..

<script>
var firstDiv = $(".forScrollLink").closest(".scroll_section").offset().top + 20;
var secondDiv = firstDiv + $(".first-scroll-content").height();
var ThirdDiv = secondDiv + $(".second-scroll-content").height() + 50;

const sections = document.querySelectorAll(".forScrollJs");
$('body').scroll(() => {
  navHighlighter()
}).scroll();
function navHighlighter() {
  var windscroll = $('body').scrollTop();
  // Get current scroll position
  let scrollY = windscroll;
  // console.log("scrollY",scrollY);
  // Now we loop through sections to get height, top and ID values for each
  sections.forEach(current => {
    const sectionHeight = current.offsetHeight;
    const sectionTop = current.offsetTop - 50;
    if (scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) {
      var section_id = $(current).attr('id');
      // document.querySelectorAll('.forScrollJs').removeClass('active');
      $(".navigation").find('.forScrollLink').removeClass('active');
      $('.navigation .forScrollLink').each(function (ind) {
        if (ind == section_id - 1) {
          $('.navigation .forScrollLink').eq(ind).addClass('active');
        }
      });
    }
  });
}

$("#firstLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: firstDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#firstLink").addClass('active');
  });
});

$("#secondLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: secondDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#secondLink").addClass('active');
  });
});

$("#thirdLink").on('click', function (e) {
  e.preventDefault();
  $('body').animate({
    scrollTop: ThirdDiv
  }, 1000, function () {
    $('.navigation .forScrollLink').each(function (ind) {
      $('.navigation .forScrollLink').eq(ind).removeClass('active');
    });
    $("#thirdLink").addClass('active');
  });
});

Answer 2

position fixed used to do that margin-left to use to avoid overridden div replace this section of CSS

        $(document).ready(function () {
            $('.forScrollLink').bind('click', function (e) {
                console.log("clicked");
                e.preventDefault(); // prevent hard jump, the default behavior
                var target = $(this).attr("href"); // Set the target as variable
                $('html, body').stop().animate({
                    scrollTop: $(target).offset().top
                }, 500, function () {
                    location.hash = target;
                });
                return false;
            });
        });
        $(window).scroll(function () {
            var scrollDistance = $(window).scrollTop();
            $('.page-section').each(function (i) {
                if ($(this).position().top <= scrollDistance) {
                    $('.navigation a.active').removeClass('active');
                    $('.navigation a').eq(i).addClass('active');
                }
            });
        }).scroll();

.scroll-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
        }

        .page-section {
            max-height: max-content;
            width: 100%;
            margin-bottom: 5%;
        }

        .sub-scroll-div {
            width: calc(100% - 50%);
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            align-content: center;
            align-items: center;
            margin-left: 50%;
        }

        .first-scroll-content {
            margin-top: 0px;
        }

        .navigation {
            display: block;
            width: 50%;
            margin-bottom: auto;
            margin-right: auto;
            position: fixed;
            top: 0;
        }

        .navigation__link {
            top: 39px;
            color: black;
            text-decoration: none;
            font-weight: 400;
        }

        .navigation__link:hover {
            color: #3f71ff;
        }

        .navigation__link.active {
            color: #3f71ff;
        }

        .navigation__link.active .active-blue-arrow {
            display: block;
            opacity: 1;
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section--150 wf-section">
        <div class="container w-container w-row scroll-container">
            <div class="navigation column-95 w-col w-col-6" id="mainNav">
                <a class="navigation__link scroll-title-div active" href="#1">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">What is</h3>
                </a>
                <a class="navigation__link scroll-title-div" href="#2">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">Why you should choose?</h3>
                </a>
                <a class="navigation__link scroll-title-div" href="#3">
                    <img class="bottom-24 active-blue-arrow" src="./images/arrow-right-blue-sm.svg"
                        alt="arrow-right-blue-sm">
                    <h3 class="bottom-24 scroll-title">Process</h3>
                </a>
            </div>
            <div class="sub-scroll-div w-row">
                <div class="page-section hero w-col w-col-6 first-scroll-content forScrollJs" id="1">
                    <div class="div-block-61" id="firstScrollTagContent">
                        <h2 class="scroll-h2 medium">What is</h2>
                        <p class="font---16">allowing them to build a great eCommerce experience.</p>
                    </div>
                </div>
                <div class="page-section w-col w-col-6 second-scroll-content forScrollJs" id="2">
                    <div class="div-block-61" id="secondScrollTagContent">
                        <h2 class="scroll-h2 medium">Why you should choose?</h2>
                        <div class="scroll-content-div">
                            <h3 class="font-25 medium">Responsive</h3>
                            <p class="font---16">allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                                allowing them to build a great eCommerce experience.
                            </p>
                        </div>
                    </div>
                </div>
                <div class="page-section w-col w-col-6 third-scroll-content forScrollJs" id="3">
                    <div class="div-block-61" id="thirdScrollTagContent">
                        <h2 class="scroll-h2 medium">Process</h2>
                        <div class="scroll-content-div">
                            <h3 class="font-25 medium">Understanding</h3>
                            <p class="font---16">By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.
                                By discussing clients’ business goals and understanding the user needs
                                and the
                                problematic areas we’ll build strategies that serve both with No-code.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

.sub-scroll-div {
        width: calc(100% - 50%);
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: center;
        align-items: center;
        margin-left: 50%;
    }