🐛 Fix: add scroll-margin to all anchors of page content (#39)

CHANGELOG.md

@@ -8,11 +8,11 @@
 - :sparkles: Feat: add pangu.js support ([#20](https://github.com/Lruihao/FixIt/issues/20))
 - :sparkles: Feat: add public network security config (only in China) ([#15](https://github.com/Lruihao/FixIt/issues/15))
 - :sparkles: Feat: add CustomJS option ([#24](https://github.com/Lruihao/FixIt/issues/24))
-- :zap: Perf: merge cardlink shortcode (deprecated v0.2.13) into link shortcode and add 'download' param ([#42](https://github.com/Lruihao/FixIt/issues/42))
+- :zap: Perf: merge shortcode cardlink (deprecated v0.2.13) into shortcode link and add 'download' param ([#42](https://github.com/Lruihao/FixIt/issues/42))
 - :zap: Perf: optimize JS loading ([#25](https://github.com/Lruihao/FixIt/issues/25))
 - :recycle: Refactor: header title DOM and add subtitle option ([#26](https://github.com/Lruihao/FixIt/issues/26))
 - :bug: Fix: typeit print code error ([#19](https://github.com/Lruihao/FixIt/issues/19))
-- :bug: Fix: add scroll-margin to headerlink
+- :bug: Fix: add scroll-margin to all anchors of page content ([#39](https://github.com/Lruihao/FixIt/issues/39))
 - :bug: Fix: pre element overflow error ([#29](https://github.com/Lruihao/FixIt/issues/29))
 - :bug: Fix: toc-auto display error ([#21](https://github.com/Lruihao/FixIt/issues/21))
 - :fire: Feat: remove lib smooth-scroll ([#1](https://github.com/Lruihao/FixIt/issues/1))

assets/css/_core/_media.scss

@@ -60,12 +60,11 @@
       padding-top: 0;
     }
 
-    .headerLink {
-      [header-mobile] & {
-        scroll-margin-top: 0;
-      }
-      [header-mobile=fixed] & {
-        scroll-margin-top: $header-height;
+    .content {
+      [id] {
+        [header-mobile=normal] & {
+          scroll-margin-top: 0;
+        }
       }
     }
 

assets/css/_page/_index.scss

@@ -12,12 +12,13 @@
     padding-top: 0;
   }
   
-  .headerLink {
-    [header-desktop] & {
+  .content {
+    [id] {
       scroll-margin-top: $header-height;
-    }
-    [header-desktop=normal] & {
-      scroll-margin-top: 0;
+      
+      [header-desktop=normal] & {
+        scroll-margin-top: 0;
+      }
     }
   }
 

src/js/theme.js

@@ -388,7 +388,7 @@ class Theme {
   initHeaderLink() {
     for (let num = 1; num <= 6; num++) {
       this.util.forEach(document.querySelectorAll('.single .content > h' + num), $header => {
-        $header.classList.add('headerLink');
+        $header.classList.add('header-link');
         $header.insertAdjacentHTML('afterbegin', `<a href="#${$header.id}" class="header-mark"></a>`);
       });
     }
@@ -424,7 +424,7 @@ class Theme {
       $toc.style.visibility = 'visible';
       const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
       const $tocLiElements = $tocCore.getElementsByTagName('li');
-      const $headerLinkElements = document.getElementsByClassName('headerLink');
+      const $headerLinkElements = document.getElementsByClassName('header-link');
       const headerIsFixed = document.body.getAttribute('header-desktop') !== 'normal';
       const headerHeight = document.getElementById('header-desktop').offsetHeight;
       const TOP_SPACING = 20 + (headerIsFixed ? headerHeight : 0);