How do you show a link after scrolling 300px down a page in JS?-CodePudding

I am trying to make a link that's anchored to a heading appear after scrolling down 300px on my website, but my code doesn't seem to work. Does anyone know why? NOTE I am using Bootstrap5 on my website.

Here is my code -

<a href="#header-title-1" id="customID" > <i
      ></i></a>



.quick-anchor-top {
    font-size: 25px;
    padding: 15px 25px 15px 25px;
    border-radius: 50px;
    color: rgb(0, 0, 0);
    background-color: rgba(182, 20, 20, 0.800);
    transition: all 0.4s ease;
    margin: 20px;
    position: fixed;
    z-index: 1;
}

.quick-anchor-top:hover {
    transition-duration: 0.4s;
    color: white;
    background-color: rgba(0, 0, 0, 0.800);
}



myID = document.getElementById("customID");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 300) {
    myID.className = "quick-anchor-top show"
  } else {
    myID.className = "quick-anchor-top hide"
  }
};

window.addEventListener("scroll", myScrollFunc);

CodePudding user response：

The JavaScript code works properly: the show and hide CSS classes names are appearing. The problem is in the CSS. So, to fix it try the following:

.quick-anchor-top {
  font-size: 25px;
  padding: 15px 25px 15px 25px;
  border-radius: 50px;
  color: rgb(0, 0, 0);
  background-color: rgba(182, 20, 20, 0.800);
  transition: all 0.4s ease;
  margin: 20px;
  position: fixed;
  z-index: 1;
  display: none;
}

.quick-anchor-top.show {
  display: block;
}

.quick-anchor-top.hide {
  display: none; 
}

.quick-anchor-top:hover {
  transition-duration: 0.4s;
  color: white;
  background-color: rgba(0, 0, 0, 0.800);
}

CodePudding user response：

When page just loaded You don't need to set

change a tag to

 <a href="#header-title-1" id="customID" > <i
        ></i></a>

change your if else to

 if (y >= 300) {
        myID.className = "quick-anchor-top"
    } else {
        myID.className = ""
    }

CodePudding user response：

That is not the correct way to add or remove classes. Also I would recommend using a debounce or throttle depending on how you need to handle events because a scroll event can run several hundred times in a second.

const myID = document.getElementById("customID");

// Reset timeout after each call
const debounce = function (func, duration = 250){
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, duration);
  };
}

// Call only once per duration
function throttle(func, duration) {
  let shouldWait = false
  return function (...args) {
    if (!shouldWait) {
      func.apply(this, args)
      shouldWait = true
      setTimeout(function () {
        shouldWait = false
      }, duration)
    }
  }
}

// Handle scroll Event
const scrollHandler = function() {
  const { scrollY } = window;
  if ( scrollY >= 300) {
    myID.classList.add('show');
    myID.classList.remove('hide');
  } else {
    myID.classList.add('hide');
    myID.classList.remove('show');
  }
};

window.addEventListener("scroll", throttle(() => scrollHandler()) );