diff --git a/assets/hb/modules/back-to-top/js/button.ts b/assets/hb/modules/back-to-top/js/button.ts index f9ce358..f803566 100644 --- a/assets/hb/modules/back-to-top/js/button.ts +++ b/assets/hb/modules/back-to-top/js/button.ts @@ -7,7 +7,7 @@ export default class Button { const btn = document.createElement('button') btn.className = 'hb-back-to-top' btn.ariaLabel = 'Back to top' - btn.innerHTML = icon + btn.innerHTML = this.transformIcon(icon) document.body.appendChild(btn) this.btn = btn @@ -23,6 +23,7 @@ export default class Button { btn.classList.remove('scrolling') } y = top + this.updatePos() }); this.btn.addEventListener('click', () => { @@ -35,6 +36,24 @@ export default class Button { }) } + transformIcon(icon) { + return icon.replace(/((.|\n)*)<\/svg>/, ` + $2 + + +`) + } + + private posIcon: HTMLElement + + updatePos() { + if (!this.posIcon) { + this.posIcon = this.btn.querySelectorAll('rect')[1] + } + const pos = document.documentElement.scrollTop / (document.documentElement.offsetHeight - document.documentElement.clientHeight) + this.posIcon.setAttribute('y', (1 - pos) * 100 + '%') + } + show() { this.btn.classList.add('show') } diff --git a/assets/hb/modules/back-to-top/scss/index.scss b/assets/hb/modules/back-to-top/scss/index.scss index 9109799..d01ca87 100644 --- a/assets/hb/modules/back-to-top/scss/index.scss +++ b/assets/hb/modules/back-to-top/scss/index.scss @@ -31,6 +31,12 @@ .hb-back-to-top-icon { display: flex; + + rect { + &:nth-of-type(2) { + fill: var(--#{$prefix}primary); + } + } } /*! purgecss end ignore */