scroll-to-top.js

// Script to create a scroll to top button
// Create a button element
var scrollButton = document.createElement('button');
scrollButton.textContent = 'Shrooovvv';
scrollButton.classList.add('scroll-to-top'); // Add a class for styling
const style = {
  display: "flex",
  position: "fixed",
  bottom: "40px",
  right: "40px",
  backgroundColor: "blueviolet",
  color: "#FFF",
  textAlign: "center",
  // boxShadow: "2px 2px 3px #999",
  zIndex: "99999 !important",
  writingMode: 'vertical-rl',
  transform: 'rotate(270deg)'
}

// Append the button to the body element
document.body.appendChild(scrollButton);

// Function to scroll to the top of the page
function scrollToTop() {
  // Scroll to the top smoothly
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}

// Add a click event listener to the button
scrollButton.addEventListener('click', scrollToTop);

function setStyle() {
  Object.entries(style).forEach(([key, value]) => {
    scrollButton.style[key] = value;
  })
}

// Function to show/hide the button based on scroll position
function toggleScrollButton() {
  if (window.scrollY === 0) {
    scrollButton.style.display = 'none';
  } else {
    setStyle()
  }
}

// Add a scroll event listener to show/hide the button
window.addEventListener('scroll', toggleScrollButton);