アンカーナビ Anchor Nav

.demo-anchor-wrap { min-height: 500px;
  display: flex; gap: 20px; max-height: 250px;
}
.demo-anchor-nav {
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: 0; flex-shrink: 0;
  border-left: 2px solid #e5e7eb; padding-left: 0;
}
.demo-anchor-link {
  padding: 6px 14px; font-size: 13px; text-decoration: none;
  color: #999; border-left: 2px solid transparent; margin-left: -2px;
  transition: all 0.2s; white-space: nowrap;
}
.demo-anchor-link:hover { color: #555; }
.demo-anchor-link.active {
  color: var(--ui-primary); font-weight: 600;
  border-left-color: var(--ui-primary);
}
.demo-anchor-content {
  flex: 1; overflow-y: auto; scroll-behavior: smooth;
  padding-right: 8px;
}
.demo-anchor-section {
  padding: 16px 0; min-height: 120px;
  border-bottom: 1px solid #f3f4f6;
}
.demo-anchor-section:last-child { border-bottom: none; }
.demo-anchor-heading {
  margin: 0 0 8px; font-size: 16px; color: var(--ui-primary);
}
.demo-anchor-section p {
  margin: 0; font-size: 13px; color: #555; line-height: 1.6;
}



}
.demo-anchor-fab svg { pointer-events: none; }
.demo-anchor-nav { background: var(--ui-surface, #fff); }
@media (max-width: 767px) {
  .demo-anchor-wrap {
    flex-direction: column !important;
    max-height: 450px !important;
    overflow-y: auto !important;
    position: relative !important;
  }
  .demo-anchor-nav {
    display: none !important;
    position: absolute !important;
    top: 8px; right: 8px;
    width: 200px;
    z-index: 50;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    max-height: 280px;
    overflow-y: auto;
    padding: 8px 0 !important;
    flex-direction: column !important;
    border-right: none !important;
  }
  [data-ui-theme="light"] .demo-anchor-nav.is-open { background: #ffffff !important; display: flex !important; }
  [data-ui-theme="dark"] .demo-anchor-nav.is-open { background: #1f1f28 !important; display: flex !important; }
  .demo-anchor-link {
    white-space: normal !important;
    border-bottom: none !important;
    border-left: 3px solid transparent !important;
    padding: 8px 14px !important;
  }
  .demo-anchor-fab {
    display: flex;
    position: absolute !important;
    bottom: 12px; right: 12px;
    z-index: 51;
    width: 44px; height: 44px;
    border-radius: 50%; border: none;
    background: var(--ui-primary); color: #fff;
    cursor: pointer;
    align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  }
  .demo-anchor-content { padding: 12px !important; }
}
@media (min-width: 768px) {
  .demo-anchor-fab { display: none !important; }
}

(function(){
  var scrollRoot = document.getElementById("demo-anchor-scroll");
  var links = document.querySelectorAll(".demo-anchor-link");
  var sections = document.querySelectorAll("#demo-anchor-scroll section[id]");
  if(!scrollRoot || !sections.length) return;
  function setActive(id) {
    links.forEach(function(l){
      var isActive = l.getAttribute("data-target") === id;
      l.style.borderLeftColor = isActive ? "var(--ui-primary)" : "transparent";
      l.style.borderBottomColor = isActive ? "var(--ui-primary)" : "transparent";
      l.style.color = isActive ? "var(--ui-primary)" : "#555";
      l.style.fontWeight = isActive ? "700" : "400";
      l.style.background = isActive ? "var(--ui-primary-light, rgba(37,99,235,0.08))" : "transparent";
    });
  }
  var observer = new IntersectionObserver(function(entries){
    entries.forEach(function(entry){
      if(entry.isIntersecting) setActive(entry.target.id);
    });
  }, { root: scrollRoot, rootMargin: "-10% 0px -80% 0px", threshold: 0 });
  sections.forEach(function(s){ observer.observe(s); });
  // クリックでスムーズスクロール
  links.forEach(function(l){
    l.addEventListener("click", function(e){
      e.preventDefault();
      var target = document.getElementById(l.getAttribute("data-target"));
      if(target) target.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  });
  setActive(sections[0].id);
  /* SP: FABで目次開閉 */
  var ancFab = document.getElementById('demo-anchor-fab');
  var ancNav = document.querySelector('.demo-anchor-nav');
  if(ancFab && ancNav){
    ancFab.addEventListener('click', function(e){ e.stopPropagation();
      var open = ancNav.classList.toggle('is-open');
      ancFab.innerHTML = open ? '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>' : '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>';
    });
    /* 目次リンククリックで閉じる */
    ancNav.querySelectorAll('.demo-anchor-link').forEach(function(l){
      l.addEventListener('click', function(){
        ancNav.classList.remove('is-open');
        ancFab.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>';
      });
    });
    document.addEventListener('click', function(e){
      if(!ancNav.contains(e.target) && e.target !== ancFab && ancNav.classList.contains('is-open')){
        ancNav.classList.remove('is-open');
        ancFab.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>';
      }
    });
  }
})();