You can add this to Settings > Advanced > Code Injection > Footer
<!-- Scroll To Top Button HTML -->
<button id="wm-back-to-top">
<div class="btt-background"></div>
<div class="icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-labelledby="title" role="img" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Angle Up</title>
<path data-name="layer1" fill="none" stroke="#202020" stroke-miterlimit="10" stroke-width="2" d="M4 42 l28 -26 L60 42" stroke-linejoin="round" stroke-linecap="round"></path>
</svg>
</div>
<p class="text">To Top</p>
</button>
<!-- Scroll To Top Button Javascript -->
<script>
(function() {
let throttlePause;
document.addEventListener('click', function(e) {
if (!e.target.closest('#wm-back-to-top')) return;
window.scrollTo({
top: 0,
behavior: 'smooth'
})
})
document.addEventListener('DOMContentLoaded', function(){
let btt = document.querySelector('#wm-back-to-top');
if (btt?.closest('.sqs-block-content')){
btt.closest('.sqs-block-content').style.display = 'inline';
}
});
const throttle = (callback, time) => {
if (throttlePause) return;
throttlePause = true;
setTimeout(() => {
callback();
throttlePause = false;
}, time);
};
const checkPos = () => {
let pos = document.documentElement.scrollTop,
revealHeight = window.innerHeight * 0,
bttButton = document.querySelector('#wm-back-to-top');
if (pos >= revealHeight) {
bttButton.classList.add('show');
} else {
bttButton.classList.remove('show');
}
}
window.addEventListener("scroll", () => {
throttle(checkPos, 150);
});
window.addEventListener('DOMContentLoaded', checkPos)
}());
</script>
Next, add this to Design > Custom CSS
/**
* Back To Top Button Styles
* From Will-Myers.com
*/
#wm-back-to-top {
z-index:999;
position:fixed;
display:flex;
bottom:0;
right:0;
min-width: 50px;
min-height: 50px;
flex-direction: column;
gap: 8px;
align-items:center;
justify-content:center;
box-sizing:content-box;
margin: 8px;
padding: 5px;
cursor:pointer;
opacity:0;
overflow:hidden;
transform: translateY(0px) scale(1);
background:transparent;
border-radius: 0px;
border-width: 0px;
border-color: #000000;
border-style:solid;
visibility:hidden;
transition: opacity .3s ease,
transform .3s ease,
visibility 0s ease .3s;
will-change:transform;
backdrop-filter: blur(0px);
&.show{
transform: translateY(0px);
opacity:1;
visibility: visible;
transition: opacity .3s ease,
transform .3s ease,
visibility 0s ease 0s;
}
.icon{
position:relative;
display:flex;
justify-content:center;
line-height:0;
height:auto;
width:auto;
}
.text{
position:relative;
margin:0;
font-size: 0.8rem;
font-weight: 500;
color: #000000;
text-transform: uppercase;
}
svg{
width: 20px;
height: 20px;
}
path{
stroke-width: 5px;
stroke: #000000;
}
.btt-background {
box-sizing:border-box;
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background-color: #f5f5f5;
opacity: 1;
transition: opacity .3s ease;
}
&:hover{
transform:translateY(-3px);
opacity: .85;
}
&:active{
transform: translateY(-3px) scale(.95);
}
}
mhoelzer got a reaction from tuanphan in [Share] Remove Header on One Page
