Липкое оглавление статьи для uCoz с короткими цифровыми якорями

<div id="tocMount"></div>

<style>
  :root{
  --toc-bg: rgba(0,0,0,.04);
  --toc-border: rgba(0,0,0,.12);
  --toc-text: inherit;
  --toc-muted: rgba(0,0,0,.65);
  --toc-accent: #0d6efd;
  --toc-radius: 14px;
  }

  @media (prefers-color-scheme: dark){
  :root{
  --toc-bg: rgba(255,255,255,.06);
  --toc-border: rgba(255,255,255,.14);
  --toc-muted: rgba(255,255,255,.7);
  }
  }

  .u-toc{
  margin: 16px 0 18px 0;
  padding: 14px 14px 12px 14px;
  border: 1px solid var(--toc-border);
  border-radius: var(--toc-radius);
  background: var(--toc-bg);
  color: var(--toc-text);
  }

  .u-toc__top{
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  }

  .u-toc__title{
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  }

  .u-toc__badge{
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--toc-border);
  color: var(--toc-muted);
  white-space: nowrap;
  flex: 0 0 auto;
  }

  .u-toc__btn{
  appearance: none;
  border: 1px solid var(--toc-border);
  background: transparent;
  color: inherit;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: transform .05s ease, background-color .15s ease;
  flex: 0 0 auto;
  }

  .u-toc__btn:active{
  transform: translateY(1px);
  }

  .u-toc__btn:hover{
  background: rgba(0,0,0,.05);
  }

  @media (prefers-color-scheme: dark){
  .u-toc__btn:hover{
  background: rgba(255,255,255,.08);
  }
  }

  .u-toc__list{
  margin: 12px 0 0 0;
  padding: 0;
  list-style: none;
  }

  .u-toc__item{
  margin: 6px 0;
  padding: 0;
  }

  .u-toc__link{
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 10px;
  transition: background-color .15s ease, color .15s ease;
  }

  .u-toc__link:hover{
  background: rgba(0,0,0,.05);
  }

  @media (prefers-color-scheme: dark){
  .u-toc__link:hover{
  background: rgba(255,255,255,.08);
  }
  }

  .u-toc__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 2px solid var(--toc-border);
  flex: 0 0 auto;
  position: relative;
  top: 1px;
  }

  .u-toc__link.is-active{
  color: var(--toc-accent);
  background: rgba(13,110,253,.08);
  }

  .u-toc__link.is-active .u-toc__dot{
  border-color: var(--toc-accent);
  background: var(--toc-accent);
  }

  .u-toc__sub{
  margin-left: 18px;
  }

  .u-toc.is-collapsed .u-toc__list{
  display: none;
  }

  .u-toc__hint{
  margin: 10px 0 0 0;
  font-size: 12px;
  color: var(--toc-muted);
  }

  .u-toc__hint code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  }

  @media (max-width: 575.98px){
  .u-toc__top{
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  }

  .u-toc__title{
  width: 100%;
  flex-wrap: wrap;
  gap: 8px;
  }

  .u-toc__btn{
  width: 100%;
  display: block;
  text-align: center;
  }
  }
</style>

<script>
(function () {
  "use strict";

  var CFG = {
  mountId: "tocMount",

  // Какие заголовки собирать в оглавление.
  // Можно оставить "h2, h3" если нужны только два уровня.
  headings: "h2, h3, h4, h5",

  // Минимум заголовков, чтобы оглавление показывалось.
  minHeadings: 2,

  // Префикс для коротких якорей.
  idPrefix: "toc_",

  // Отступ при прокрутке к заголовку, если есть фиксированная шапка.
  activeOffsetPx: 110,

  // Плавная прокрутка.
  smoothScroll: true,

  // Где искать заголовки.
  // Скрипт берет первый найденный контейнер.
  contentSelectors: [
  ".eMessage",
  ".entry-content",
  ".post-content",
  ".u-entry__text",
  "article",
  "main",
  ".content",
  "body"
  ],

  // Запоминаем свернуто или нет.
  storageKey: "ucoz_toc_collapsed_v6"
  };

  function qs(sel, root) { return (root || document).querySelector(sel); }
  function qsa(sel, root) { return Array.prototype.slice.call((root || document).querySelectorAll(sel)); }

  function escapeHtml(s){
  return String(s).replace(/[&<>"']/g, function(ch){
  return ({ "&":"&","<":"<",">":">","\"":""","'":"'" })[ch];
  });
  }

  function pickContentRoot(){
  for (var i = 0; i < CFG.contentSelectors.length; i++) {
  var el = qs(CFG.contentSelectors[i]);
  if (el) return el;
  }
  return document.body;
  }

  function ensureUniqueId(base){
  var id = base;
  var n = 2;
  while (document.getElementById(id)) {
  id = base + n;
  n++;
  }
  return id;
  }

  function build(){
  var mount = document.getElementById(CFG.mountId);
  if (!mount) return;

  var root = pickContentRoot();

  var hs = qsa(CFG.headings, root).filter(function(h){
  var txt = (h.textContent || "").trim();
  return txt.length > 0;
  });

  if (hs.length < CFG.minHeadings) return;

  var items = [];
  var seq = 1;

  hs.forEach(function(h){
  var text = (h.textContent || "").trim();
  var level = (h.tagName || "").toLowerCase();

  var id = h.getAttribute("id");
  if (!id) {
  id = ensureUniqueId(CFG.idPrefix + String(seq));
  h.setAttribute("id", id);
  seq++;
  }

  items.push({ id: id, level: level, text: text, el: h });
  });

  if (items.length < CFG.minHeadings) return;

  var isCollapsed = false;
  try { isCollapsed = localStorage.getItem(CFG.storageKey) === "1"; } catch(e) {}

  var html = "";
  html += '<nav class="u-toc' + (isCollapsed ? ' is-collapsed' : '') + '" aria-label="Оглавление">';
  html += '<div class="u-toc__top">';
  html += '<p class="u-toc__title">Оглавление <span class="u-toc__badge">' + items.length + '</span></p>';
  html += '<button type="button" class="u-toc__btn" data-toc-toggle>' + (isCollapsed ? 'Показать' : 'Свернуть') + '</button>';
  html += '</div>';
  html += '<ul class="u-toc__list">';

  items.forEach(function(it){
  var subClass = (it.level === "h3" || it.level === "h4" || it.level === "h5") ? " u-toc__sub" : "";
  html += '<li class="u-toc__item' + subClass + '">';
  html += '<a class="u-toc__link" href="#' + encodeURIComponent(it.id) + '" data-toc-link="' + escapeHtml(it.id) + '">';
  html += '<span class="u-toc__dot" aria-hidden="true"></span>';
  html += '<span class="u-toc__text">' + escapeHtml(it.text) + '</span>';
  html += '</a>';
  html += '</li>';
  });

  html += '</ul>';
  html += '<p class="u-toc__hint">Якоря короткие. Пример: <code>#' + escapeHtml(CFG.idPrefix) + '1</code>.</p>';
  html += '</nav>';

  mount.innerHTML = html;

  var toc = mount.querySelector(".u-toc");
  var btn = mount.querySelector("[data-toc-toggle]");
  var links = qsa("[data-toc-link]", mount);

  if (btn) {
  btn.addEventListener("click", function(){
  var collapsed = toc.classList.toggle("is-collapsed");
  btn.textContent = collapsed ? "Показать" : "Свернуть";
  try { localStorage.setItem(CFG.storageKey, collapsed ? "1" : "0"); } catch(e) {}
  }, { passive: true });
  }

  links.forEach(function(a){
  a.addEventListener("click", function(ev){
  var id = a.getAttribute("data-toc-link");
  var target = document.getElementById(id);
  if (!target) return;

  ev.preventDefault();

  var top = target.getBoundingClientRect().top + window.pageYOffset - CFG.activeOffsetPx;
  if (CFG.smoothScroll && "scrollBehavior" in document.documentElement.style) {
  window.scrollTo({ top: Math.max(0, top), behavior: "smooth" });
  } else {
  window.scrollTo(0, Math.max(0, top));
  }

  history.replaceState(null, "", "#" + encodeURIComponent(id));
  }, { passive: false });
  });

  var currentId = null;

  function setActive(id){
  if (currentId === id) return;
  currentId = id;
  links.forEach(function(a){
  a.classList.toggle("is-active", a.getAttribute("data-toc-link") === id);
  });
  }

  function onScroll(){
  var y = window.pageYOffset || document.documentElement.scrollTop || 0;
  var best = null;

  for (var i = 0; i < items.length; i++) {
  var el = items[i].el;
  var top = el.getBoundingClientRect().top + window.pageYOffset;
  if (top - CFG.activeOffsetPx <= y) best = items[i].id;
  }

  setActive(best || items[0].id);
  }

  onScroll();
  window.addEventListener("scroll", onScroll, { passive: true });
  window.addEventListener("resize", onScroll, { passive: true });
  }

  if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", build);
  } else {
  build();
  }
})();
</script>