JSFiddle - React, Tailwind, and code Playground

by Zoxon

HTML

<title>ScrollTo плагин перемотки скролла</title>

<body>
<div class="nav main-menu" style="position:fixed; left: 20px; top: 10px;">
	<h3>Пример первый</h3>
	<ul id="main-menu">
		<li><a class="one" href="#block1" class="active">Монитор</a></li>
		<li><a class="one" href="#block2">Клавиатура</a></li>
		<li><a class="one" href="#block3">Мышка</a></li>
	</ul>
</div>

<div class="nav" style="position:fixed; right: 20px; top: 10px;">
	<h3>Пример второй</h3>
	<ul>
		<li><a class="two" href="#block1">Монитор</a></li>
		<li><a class="two" href="#block2">Клавиатура</a></li>
		<li><a class="two" href="#block3">Мышка</a></li>
	</ul>
</div>

<h2 style="text-align: center;">ScrollTo плагин перемотки скролла</h2>

<div id="block1" style="width: 700px; margin: 100px auto 20px; padding: 20px;">
	<h3 style="text-align: center;">Монитор</h3>
	<p style="text-align: justify;">
		Монитор — аппарат, предназначенный для вывода графической или текстовой информации:Дисплей — устройство для показа изображений, порождаемых другими устройствами (например, компьютерами).
		Прибор для контроля определённых параметров, которые нужно непрерывно или регулярно отслеживать, например, уровня радиации.
		Видеоконтрольное устройство (в телевидении — для контроля качества изображения, в системах видеонаблюдения — для наблюдения за контролируемым пространством).
		Студийный монитор — громкоговоритель в акустическом оформлении (акустическая система), небольшой мощности с идеально гладкой АЧХ, используемый в профессиональной звукозаписи для контроля баланса инструментов, качества исполнения (во время записи), качества звука.
		Сценический монитор — акустическая система используемая обычно в концертной деятельности для создания на сцене или в других озвучиваемых помещениях дополнительного звукового поля, необходимого для ориентации исполнителей в музыкальном звучании.
		Монитор — прибор, представляющий собой гибрид телевизора и видеокамеры, описанный в романе Джорджа Оруэлла «1984». Используется для...

CSS

.nav ul {
	padding-left: 0;
}
.nav ul li {
	list-style: none;
}
.nav ul li a{
	margin: 3px 0;
	width: 100px;
	background: #f3f3f3;
	display: block;
	padding: 5px 10px;
	text-decoration: none;
	color: #666;
}
.nav ul li a:hover{
	background: #f7f7f7;
	text-decoration: none;
	color: #999;
}
.active {
    background: #000;
}

JavaScript

$(document).ready(function(){

    var anchor = new Array();
    var i = 0;
    var checker = new Array();
    var click = true;
    checker['services'] = 0;
    checker['gallery'] = 0;
    checker['transport'] = 0;
    checker['separate-blocks'] = 0;


    notVisibleMargin = (($(window).width() - $('.row').width()) / 2) + 327;

	
	$(".main-menu a").click(function() {
        var top = $($(this).attr("href")).offset().top - 40;
        $("html, body").animate({
            scrollTop: top + "px"
        }, {
            duration: 500
        });
        return false;
    });

    

    $(".main-menu ul#main-menu li a").each(function(){
        if(i == 0){
            anchor[i] = $($(this).attr("href")).offset().top;
        }else{
            anchor[i] = $($(this).attr("href")).offset().top - 40;
        }
        i++;
    });

    function changeActiveMenu(){
        var $this = $(this);
        var currentOffset = $this.scrollTop();
        var currentIndex = 0;

        for(var key = anchor.length; key <= anchor.length; key--){
            if(currentOffset >= anchor[key]){
                //console.log(anchor[key]);
                currentIndex = key;
                break;
            }
        }

        $(".main-menu ul li").removeClass('active');
        $(".main-menu ul li:eq(" + currentIndex + ")").addClass('active');
    }

    function animateRecursion(obj, total){
        if(total <= obj.length){
            obj.eq(total).css('visibility','visible').hide().fadeIn(200, function(){
                animateRecursion(obj, ++total);
            });
        }
    }

    function animateMarginRecursion(obj, total){
        if(total <= obj.length){
            obj.eq(total-1).animate({
                marginLeft: '0px'
            }, 600,function(){
                if($(this).children('.transport-text').hasClass('shoved')){}else{
                    $(this).children('.transport-text').css('visibility','visible').hide().slideDown().addClass('shoved');
          ...