diff --git a/source/css/layout/_partial/toc.styl b/source/css/layout/_partial/toc.styl index 2b608bf..c3c6df0 100644 --- a/source/css/layout/_partial/toc.styl +++ b/source/css/layout/_partial/toc.styl @@ -73,6 +73,7 @@ .nav-number .nav-text { color var(--primary-color) + font-weight bold } } @@ -80,6 +81,7 @@ .nav-number .nav-text { color var(--primary-color) + font-weight bold } } } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index d9e7dfe..d6a312b 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -266,8 +266,7 @@ $toc-container-width = 16rem box-sizing border-box width $toc-container-width max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value) - padding-left 2rem - padding-bottom 1rem + padding 2rem 0 2rem 2rem transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease") .header-shrink & { diff --git a/source/js/toc.js b/source/js/toc.js index 2c6aca4..65f60de 100644 --- a/source/js/toc.js +++ b/source/js/toc.js @@ -29,16 +29,19 @@ function initTOC() { ) element.addEventListener('click', (event) => { event.preventDefault() - const offset = target.getBoundingClientRect().top + window.scrollY + let winScrollY = window.scrollY + winScrollY = winScrollY === 0 ? -20 : winScrollY + const offset = target.getBoundingClientRect().top + winScrollY window.anime({ targets: document.scrollingElement, duration: 500, easing: 'linear', scrollTop: offset - 10, - complete: function () { + complete: () => { + history.pushState(null, document.title, element.href) setTimeout(() => { KEEP.utils.pageTop_dom.classList.add('hide') - }, 100) + }, 150) } }) }) @@ -60,7 +63,7 @@ function initTOC() { if (parent.matches('li')) parent.classList.add('active') parent = parent.parentNode } - // Scrolling to center active TOC element if TOC content is taller then viewport. + // Scrolling to center active TOC element if TOC content is taller than viewport. const tocElement = document.querySelector('.post-toc-wrap') window.anime({ targets: tocElement,