JSFiddle - React, Tailwind, and code Playground

by Sushant Ghorpade

HTML

<script src="page-scroll-to-id/jquery.malihu.PageScroll2id.js"></script>
<body>>
<div id="content">

        <div class="side-nav-year">
            <a id="prev" class="nav-button top"><i class="icon24 icon-up-arrow"></i></a>
            <div class="menu-container">
                <ul class="menu-list">
                    <li class="active"><a href="#2017" class="section-bullet _mPS2id-h mPS2id-target" rel="m_PageScroll2id">2017</a></li>
                    <li><a href="#2016" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2016</a></li>
                    <li><a href="#2015" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2015</a></li>
                    <li><a href="#2014" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2014</a></li>
                    <li><a href="#2013" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2013</a></li>
                    <li><a href="#2012" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2012</a></li>
                    <li><a href="#2011" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2011</a></li>
                    <li><a href="#2010" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2010</a></li>
                    <li><a href="#2007" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2007</a></li>
                    <li><a href="#2006" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2006</a></li>
                    <li><a href="#2003" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2003</a></li>
                    <li><a href="#2002" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2002</a></li>
                    <li><a href="#2001" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2001</a></li>
                    <li><a href="#2000" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">2000</a></li>
                    <li><a href="#1999" class="section-bullet _mPS2id-h" rel="m_PageScroll2id">1999</a></li>
                    <li><a...

SCSS

.side-nav-year {
  position: absolute;
  top:300px;
  right: 0;
  text-align: center;
  width: 100px;
  margin-top: 50px;
  @include tab-landscape {
    position: relative;
    width: 100%;
    z-index: 99;
    top:0;
    right: 0;
    left: 0;
    margin-top: auto;
    background: $black_rock url('#{$assetpath}/dot-tile-50.png') repeat center center;
  }
  &.affix {
    position: fixed;
    top:50%;
    margin-top: -200px;
    @include tab-landscape {
      top: 73px;
      margin-top: auto;
    }
    @include mobile-width {
      top: 53px;
      margin-top: auto;
    }
  }
  a.nav-button {
    cursor: pointer;
    display: inline-block;
    @include tab-landscape {
      position: absolute;
      padding: 10px;
    }
    &.top {
      top: 0;
      left: -20px;
      bottom: 0;
      @include tab-landscape {
        left: 0;
      }
    }
    &.bottom {
      bottom: -20px;
      left: 0;
      right: 0;
      @include tab-landscape {
        right: 0;
        top:0;
        left: auto;
        bottom: auto;
      }
    }
  }
}
div.menu-container {
  height: 400px;
  overflow: hidden;
  @include tab-landscape {
    height: auto;
    margin: 0 40px;
    padding: 10px 0;
    overflow-x: scroll;
  }
  .menu-list {
    white-space: nowrap;
    transition: all ease 750ms;

    li {
      display: block;
      @include tab-landscape {
        display: inline-block;
        vertical-align: middle;
      }
      a {
        display: block;
        margin: 20px 0;
        @include transition(0.4s all ease-in-out);
        @include tab-landscape {
          margin: 0 10px;
        }
        &.section-bullet {
          font-family: $font-family-book;
          font-size: $font-size-small;
          color: $prelude;
          line-height: 25px;
          &.mPS2id-highlight {
            font-family: $font-family-bold;
            font-size: $font-size-large;
            color: $robins_blue;
          }
        }
      }
    }
  }
}
#content {
  background: $black_rock...

JavaScript

// Page to ID scroll Plugin call
    (function($){
        $(window).on("load",function(){

            /* Page Scroll to id fn call */
            $("a[rel='m_PageScroll2id']").mPageScroll2id({
                scrollSpeed: 600
                ,scrollEasing:"easeOutQuint"
                ,liveSelector:"a[rel='m_PageScroll2id']"
            });

        });
    })(jQuery);
		
		
(function($){
  $(window).on("load",function(){

    if(!$(document).data("mPS2id")){
      console.log("Error: 'Page scroll to id' plugin not present or activated. Please run the code after plugin is loaded.");
      return;
    }

    $(document).data("mPS2idExtend",{
      selector:"._mPS2id-h",
      currentSelector:function(){
        return this.index($(".mPS2id-highlight-first").length ? $(".mPS2id-highlight-first") : $(".mPS2id-highlight"));
      },
      input:{y:null,x:null},
      i:null,
      time:null
    }).on("scrollSection",function(e,dlt,i){
      var d=$(this).data("mPS2idExtend"),
        sel=$(d.selector);
      if(!$("html,body").is(":animated")){
        if(!i) i=d.currentSelector.call(sel);
        if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger("click.mPS2id");
      }
    }).on("mousewheel DOMMouseScroll",function(e){ //mousewheel
      if($($(this).data("mPS2idExtend").selector).length) e.preventDefault();
      $(this).trigger("scrollSection",((e.originalEvent.detail<0 || e.originalEvent.wheelDelta>0) ? 1 : -1));
    }).on("keydown",function(e){ //keyboard
      var code=e.keyCode ? e.keyCode : e.which,
        keys=$(this).data("mPS2id").layout==="horizontal" ? [37,39] : [38,40];
      if(code===keys[0] || code===keys[1]){
        if($($(this).data("mPS2idExtend").selector).length) e.preventDefault();
        $(this).trigger("scrollSection",(code===keys[0] ? 1 : -1));
      }
    });

  });
})(jQuery);