From b80a694bb35d97bab2dee294dbb26d9bff3fddb3 Mon Sep 17 00:00:00 2001 From: Simonwei97 <119845914+simonwei97@users.noreply.github.com> Date: Tue, 21 May 2024 11:20:49 +0800 Subject: [PATCH] feat: add back-to-top button (#2427) slove #2425 Demo: image --------- Signed-off-by: simonwei97 Signed-off-by: Simonwei97 <119845914+simonwei97@users.noreply.github.com> --- _includes/scripts/back_to_top.liquid | 4 ++++ _layouts/default.liquid | 1 + _sass/_themes.scss | 19 +++++++++++++++++++ _sass/_variables.scss | 8 ++++++++ assets/js/vanilla-back-to-top.min.js | 1 + 5 files changed, 33 insertions(+) create mode 100644 _includes/scripts/back_to_top.liquid create mode 100644 assets/js/vanilla-back-to-top.min.js diff --git a/_includes/scripts/back_to_top.liquid b/_includes/scripts/back_to_top.liquid new file mode 100644 index 0000000..6ff79fe --- /dev/null +++ b/_includes/scripts/back_to_top.liquid @@ -0,0 +1,4 @@ + + diff --git a/_layouts/default.liquid b/_layouts/default.liquid index b4251d2..77b78b2 100644 --- a/_layouts/default.liquid +++ b/_layouts/default.liquid @@ -71,5 +71,6 @@ {% include scripts/wechatModal.liquid %} {% include scripts/imageLayouts.liquid %} {% include scripts/jekyll_tabs.liquid %} + {% include scripts/back_to_top.liquid %} diff --git a/_sass/_themes.scss b/_sass/_themes.scss index 233f533..f65c5d1 100644 --- a/_sass/_themes.scss +++ b/_sass/_themes.scss @@ -17,6 +17,8 @@ --global-divider-color: rgba(0, 0, 0, 0.1); --global-card-bg-color: #{$white-color}; --global-highlight-color: #{$red-color-dark}; + --global-back-to-top-bg-color: #{$black-color}; + --global-back-to-top-text-color: #{$white-color}; --global-tip-block: #42b983; --global-tip-block-bg: #e2f5ec; @@ -51,6 +53,16 @@ .repo-img-dark { display: none; } + + #back-to-top { + color: var(--global-back-to-top-text-color); + background: var(--global-back-to-top-bg-color); + bottom: $back-to-top-bottom; + right: $back-to-top-right; + height: $back-to-top-height; + width: $back-to-top-width; + z-index: $back-to-top-z-index; + } } html[data-theme="dark"] { @@ -67,6 +79,8 @@ html[data-theme="dark"] { --global-distill-app-color: #{$grey-color-light}; --global-divider-color: #424246; --global-card-bg-color: #{$grey-900}; + --global-back-to-top-bg-color: #{$white-color}; + --global-back-to-top-text-color: #{$black-color}; --global-tip-block: #42b983; --global-tip-block-bg: #e2f5ec; @@ -103,6 +117,11 @@ html[data-theme-setting="dark"] { #light-toggle-light { display: none; } + + #back-to-top { + color: var(--global-back-to-top-text-color); + background: var(--global-back-to-top-bg-color); + } } html[data-theme-setting="light"] { diff --git a/_sass/_variables.scss b/_sass/_variables.scss index 49db435..9350923 100644 --- a/_sass/_variables.scss +++ b/_sass/_variables.scss @@ -40,3 +40,11 @@ $fa-font-path: "../webfonts"; // Tabler icons location $ti-font-path: "../fonts"; + +// Back To Top button config +$back-to-top-z-index: 10; +$back-to-top-bottom: 50px; +$back-to-top-right: 50px; +$back-to-top-diameter: 56px; +$back-to-top-height: $back-to-top-diameter; +$back-to-top-width: $back-to-top-diameter; diff --git a/assets/js/vanilla-back-to-top.min.js b/assets/js/vanilla-back-to-top.min.js new file mode 100644 index 0000000..6be04a7 --- /dev/null +++ b/assets/js/vanilla-back-to-top.min.js @@ -0,0 +1 @@ +"use strict";function addBackToTop(){var o,t,e,n,i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},r=i.backgroundColor,d=void 0===r?"#000":r,a=i.cornerOffset,c=void 0===a?20:a,s=i.diameter,l=void 0===s?56:s,u=i.ease,p=void 0===u?function(o){return.5*(1-Math.cos(Math.PI*o))}:u,m=i.id,h=void 0===m?"back-to-top":m,b=i.innerHTML,v=void 0===b?'':b,f=i.onClickScrollTo,x=void 0===f?0:f,w=i.scrollContainer,g=void 0===w?document.body:w,k=i.scrollDuration,y=void 0===k?100:k,T=i.showWhenScrollTopIs,M=void 0===T?1:T,z=i.size,E=void 0===z?l:z,C=i.textColor,L=void 0===C?"#fff":C,N=i.zIndex,I=void 0===N?1:N,A=g===document.body,B=A&&document.documentElement;o=Math.round(.43*E),t=Math.round(.29*E),e="#"+h+"{background:"+d+";-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:"+c+"px;-webkit-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);-moz-box-shadow:0 2px 5px 0 rgba(0,0,0,.26);box-shadow:0 2px 5px 0 rgba(0,0,0,.26);color:"+L+";cursor:pointer;display:block;height:"+E+"px;opacity:1;outline:0;position:fixed;right:"+c+"px;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-transition:bottom .2s,opacity .2s;-o-transition:bottom .2s,opacity .2s;-moz-transition:bottom .2s,opacity .2s;transition:bottom .2s,opacity .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:"+E+"px;z-index:"+I+"}#"+h+" svg{display:block;fill:currentColor;height:"+o+"px;margin:"+t+"px auto 0;width:"+o+"px}#"+h+".hidden{bottom:-"+E+"px;opacity:0}",(n=document.createElement("style")).appendChild(document.createTextNode(e)),document.head.insertAdjacentElement("afterbegin",n);var D=function(){var o=document.createElement("div");return o.id=h,o.className="hidden",o.innerHTML=v,o.addEventListener("click",function(o){o.preventDefault(),function(){var o="function"==typeof x?x():x,t=window,e=t.performance,n=t.requestAnimationFrame;if(y<=0||void 0===e||void 0===n)return q(o);var i=e.now(),r=j(),d=r-o;n(function o(t){var e=Math.min((t-i)/y,1);q(r-Math.round(p(e)*d)),e<1&&n(o)})}()}),document.body.appendChild(o),o}(),H=!0;function S(){j()>=M?function(){if(!H)return;D.className="",H=!1}():function(){if(H)return;D.className="hidden",H=!0}()}function j(){return g.scrollTop||B&&document.documentElement.scrollTop||0}function q(o){g.scrollTop=o,B&&(document.documentElement.scrollTop=o)}(A?window:g).addEventListener("scroll",S),S()} \ No newline at end of file