divs

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const article = document.getElementById("single-article");
        const tocContainer = document.getElementById("toc");

        // Create the TOC
        const createTOC = () => {
            const headings = article.querySelectorAll("h2");
            const tocFragment = document.createDocumentFragment();

            headings.forEach((heading) => {
                const title = heading.textContent.trim();
                const anchorId = `toc-${title.toLowerCase().replace(/\s+/g, '-')}`;

                heading.id = anchorId;

                const li = document.createElement("li");
                const anchor = document.createElement("div"); // Заменяем тег <a> на <div>
                anchor.textContent = title;
                anchor.dataset.href = `#${anchorId}`; // Используем data-href
                li.appendChild(anchor);
                tocFragment.appendChild(li);
            });

            const ul = document.createElement("ul");
            ul.appendChild(tocFragment);
            tocContainer.appendChild(ul);
        };

        // Check if the TOC container exists and the article has headings
        if (tocContainer && article) {
            createTOC();
        }

        var tocItems = document.querySelectorAll('#toc div'); // Изменим селектор для div
        var titleElements = document.querySelectorAll('.content [id]');

        function setActiveItem(targetId) {
            tocItems.forEach(function (item) {
                if (item.dataset.href === `#${targetId}`) { // Сравниваем по data-href
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }

        tocItems.forEach(function (item) {
            item.addEventListener('click', function (event) {
                event.preventDefault();
                var targetId = this.dataset.href.substring(1); // Извлекаем id из data-href
                var element = document.getElementById(targetId);
                const offset = element.getBoundingClientRect().top - 100;
                window.scrollTo({
                    top: window.scrollY + offset,
                    behavior: 'smooth' // Добавляем плавный скроллинг
                });
                history.replaceState(null, null, '#' + targetId); // Устанавливаем хеш
            });
        });

        titleElements.forEach(function (title) {
            title.addEventListener('click', function () {
                var targetId = this.getAttribute('id');
                setActiveItem(targetId);
            });
        });

        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                const id = entry.target.getAttribute("id");
                if (entry.isIntersecting) {
                    document.querySelectorAll(".active").forEach((z) => {
                        z.classList.remove("active");
                    });
                    document.querySelector(`div[data-href="#${id}"]`).classList.add("active"); // Обновляем для data-href
                }
            });
        }, { rootMargin: '0px 0px -50% 0px' });

        if ("h2" !== "") {
            document.getElementById("single-article").querySelectorAll("h2").forEach(function (heading) {
                observer.observe(heading);
            });
        }

        // handle anchor position
        function offsetAnchor() {
            if (location.hash.length !== 0) {
                const targetId = location.hash.substring(1);
                const targetElement = document.getElementById(targetId);
                if (targetElement) {
                    const offset = targetElement.getBoundingClientRect().top - 100;
                    window.scrollTo({
                        top: window.scrollY + offset,
                        behavior: 'smooth' // Добавляем плавный скроллинг
                    });
                }
            }
        }

        window.addEventListener("hashchange", offsetAnchor);
        window.setTimeout(offsetAnchor, 1);
    });
</script>