I have been running the following codes on my stylesheet and .js files for scrolling to the top of the article. I saw all the resolutions given, but none worked for me. It works for the internal view of the online wysiwyg document text editing software. However, when I publish the page, I see the scroll button, which is just not clickable and does not scroll to the top.
Here’s the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="style.css">
<div id="progress">
<span id="progress-value">^</span>
</div>
<p>Content goes here</p>
<!-- Script -->
<script src="script.js">
</script>
CSS
/* This is for Scrollbar*/
$('body')
.css('position', 'fixed')
.delay(200)
.queue(function(next) {
$(this).css('position', 'relative');
next();
});
{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
scroll-behavior: smooth;
}
#progress {
position: fixed;
bottom: 50px;
right: 10px;
height: 70px;
width: 70px;
display: none;
place-items: center;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
#progress-value {
display: block;
height: calc(100% - 15px);
width: calc(100% - 15px);
background-color: #ffffff;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 38px;
color: #00C3EF;
}
Javascript
//Movable scrollbar
let calcScrollValue = () => {
let scrollProgress = document.getElementById("progress");
let progressValue = document.getElementById("progress-value");
let pos = document.documentElement.scrollTop;
let calcHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
let scrollValue = Math.round((pos * 100) / calcHeight);
if (pos > 100) {
scrollProgress.style.display = "grid";
} else {
scrollProgress.style.display = "none";
}
scrollProgress.addEventListener("click", () => {
document.documentElement.scrollTop = 0;
});
scrollProgress.style.background = `conic-gradient(#00c3ef ${scrollValue}%, #F0F8FF ${scrollValue}%)`;
};
window.onscroll = calcScrollValue;
window.onload = calcScrollValue;
var $backToTop = $(".back-to-top");
$backToTop.hide();
$(window).on('scroll', function() {
if ($(this).scrollTop() > 100) {
$backToTop.fadeIn();
} else {
$backToTop.fadeOut();
}
});
$backToTop.on('click', function(e) {
$("html, body").animate({scrollTop: 0}, 500);
});
Could someone please help me out!