feat: replace smooth scroll js with css scroll-behavior

README.md

@@ -113,7 +113,6 @@ I hope you will LoveIt ❤️!
 * **Custom style** shortcode
 * **Custom script** shortcode
 * **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
 * ...
 
@@ -164,7 +163,6 @@ Thanks to the authors of following resources included in the theme:
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
 * [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete](https://github.com/algolia/autocomplete)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)

README.zh-cn.md

@@ -108,7 +108,6 @@
 * 支持**自定义样式**的 shortcode
 * 支持**自定义脚本**的 shortcode
 * 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
-* 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
 * 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 * ...
 
@@ -159,7 +158,6 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
 * [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete](https://github.com/algolia/autocomplete)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)

assets/css/_core/_base.scss

@@ -5,6 +5,12 @@ html {
   font-size: $global-font-size;
   line-height: $global-line-height;
   width:100%;
+
+  scroll-behavior: smooth;
+
+  main [id] {
+    scroll-margin-top: $header-height + .5rem;
+  }
 }
 
 /* scrollbar, only support webkit */

assets/css/_partial/_single/_code.scss

@@ -40,6 +40,8 @@ code, pre, .highlight table, .highlight tr, .highlight td {
 .highlight {
   font-family: $code-font-family;
   font-size: $code-font-size;
+  line-height: 1.4em;
+  margin: .5rem 0;
 
   .table-wrapper {
     > table,
@@ -55,11 +57,6 @@ code, pre, .highlight table, .highlight tr, .highlight td {
       }
     }
   }
-}
-
-.highlight {
-  line-height: 1.4em;
-  margin: .5rem 0;
 
   > .chroma {
     position: relative;

assets/data/cdn/jsdelivr.yml

@@ -9,8 +9,6 @@ libFiles:
   fontawesomeFreeCSS: '@fortawesome/fontawesome-free@6.1.1/css/all.min.css'
   # animate.css@4.1.1 https://github.com/daneden/animate.css
   animateCSS: animate.css@4.1.1/animate.min.css
-  # smooth-scroll@16.1.3 https://github.com/cferdinandi/smooth-scroll
-  smoothScrollJS: smooth-scroll@16.1.3/dist/smooth-scroll.min.js
   # autocomplete.js@0.38.1 https://github.com/algolia/autocomplete.js
   autocompleteJS: autocomplete.js@0.38.1/dist/autocomplete.min.js
   # lunr.js@2.3.9 https://lunrjs.com/

assets/data/polyfill.yml

@@ -4,10 +4,6 @@ theme:
   - Promise
   - fetch
   - Element.prototype.after
-smooth-scroll:
-  - Element.prototype.closest
-  - requestAnimationFrame
-  - CustomEvent
 algoliasearch:
   - Promise
   - Object.entries

assets/js/theme.js

@@ -855,16 +855,6 @@ var Theme = /*#__PURE__*/function () {
         }
       }
     }
-  }, {
-    key: "initSmoothScroll",
-    value: function initSmoothScroll() {
-      if (SmoothScroll) new SmoothScroll('[href^="#"]', {
-        speed: 300,
-        speedAsDuration: true,
-        header: '#header-desktop',
-        offset: 10
-      });
-    }
   }, {
     key: "initCookieconsent",
     value: function initCookieconsent() {
@@ -1017,7 +1007,6 @@ var Theme = /*#__PURE__*/function () {
         this.initHighlight();
         this.initTable();
         this.initHeaderLink();
-        this.initSmoothScroll();
         this.initMath();
         this.initMermaid();
         this.initEcharts();

assets/lib/VERSION

@@ -2,7 +2,6 @@ normalize.css@8.0.1 https://github.com/necolas/normalize.css
 fontawesome-free@6.1.1 https://fontawesome.com/
 simple-icons@6.20.0 https://github.com/simple-icons/simple-icons
 animate.css@4.1.1 https://github.com/daneden/animate.css
-smooth-scroll@16.1.3 https://github.com/cferdinandi/smooth-scroll
 autocomplete@0.38.1 https://github.com/algolia/autocomplete
 lunr.js@2.3.9 https://lunrjs.com/
 algoliasearch@4.13.0 https://github.com/algolia/algoliasearch-client-javascript

exampleSite/content/about/index.en.md

@@ -79,7 +79,6 @@ math:
 * :(fab fa-css3 fa-fw): **Custom style** shortcode
 * :(fab fa-js-square fa-fw): **Custom script** shortcode
 * :(fas fa-i-cursor fa-fw): **Animated typing** supported by [TypeIt](https://typeitjs.com/)
-* :(fas fa-arrows-up-down fa-fw): **Dynamic scroll** supported by [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * :(fas fa-cookie-bite fa-fw): **Cookie consent banner** supported by [cookieconsent](https://github.com/osano/cookieconsent)
 * ...
 
@@ -97,7 +96,6 @@ Thanks to the authors of following resources included in the theme:
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
 * [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete](https://github.com/algolia/autocomplete)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)

exampleSite/content/about/index.zh-cn.md

@@ -79,7 +79,6 @@ math:
 * :(fab fa-css3 fa-fw): 支持**自定义样式**的 shortcode
 * :(fab fa-js-square fa-fw): 支持**自定义脚本**的 shortcode
 * :(fas fa-i-cursor fa-fw): 支持基于 [TypeIt](https://typeitjs.com/) 的**打字动画** shortcode
-* :(fas fa-arrows-up-down fa-fw): 支持基于 [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll) 的**滚动动画**
 * :(fas fa-cookie-bite fa-fw): 支持基于 [cookieconsent](https://github.com/osano/cookieconsent) 的 **Cookie 许可横幅**
 * ...
 
@@ -97,7 +96,6 @@ LoveIt 主题中用到了以下项目，感谢它们的作者：
 * [Font Awesome](https://fontawesome.com/)
 * [Simple Icons](https://github.com/simple-icons/simple-icons)
 * [Animate.css](https://daneden.github.io/animate.css/)
-* [Smooth Scroll](https://github.com/cferdinandi/smooth-scroll)
 * [autocomplete](https://github.com/algolia/autocomplete)
 * [Lunr.js](https://lunrjs.com/)
 * [algoliasearch](https://github.com/algolia/algoliasearch-client-javascript)

layouts/partials/assets.html

@@ -3,10 +3,6 @@
 {{- $fingerprint := .Scratch.Get "fingerprint" -}}
 {{- $config := (.Scratch.Get "this").config -}}
 
-{{- /* Smooth Scroll */ -}}
-{{- $source := $cdn.smoothScrollJS | default "lib/smooth-scroll/smooth-scroll.min.js" -}}
-{{- dict "Source" $source "Fingerprint" $fingerprint | dict "Scratch" .Scratch "Data" | partial "scratch/script.html" -}}
-
 {{- /* Search */ -}}
 {{- if .Site.Params.search | and .Site.Params.search.enable -}}
     {{- $search := .Site.Params.search -}}

src/js/theme.js

@@ -636,15 +636,6 @@ class Theme {
         }
     }
 
-    initSmoothScroll() {
-        if (SmoothScroll) new SmoothScroll('[href^="#"]', {
-            speed: 300,
-            speedAsDuration: true,
-            header: '#header-desktop',
-            offset: 10,
-        });
-    }
-
     initCookieconsent() {
         if (this.config.cookieconsent) cookieconsent.initialise(this.config.cookieconsent);
     }
@@ -728,7 +719,6 @@ class Theme {
             this.initHighlight();
             this.initTable();
             this.initHeaderLink();
-            this.initSmoothScroll();
             this.initMath();
             this.initMermaid();
             this.initEcharts();