在JS中向下滾動300px頁面后如何顯示鏈接？

我試圖在我的網站上向下滾動 300 像素后顯示錨定到標題的鏈接，但我的代碼似乎不起作用。有誰知道為什么？ 注意-我在我的網站上使用 Bootstrap5。 我已經根據收到的回復更改了我的代碼，但我仍然面臨這個問題。這就是我的代碼現在的樣子 -

這是我的代碼 -

 <a href="#header-title-1" id="customID" class="bottom-0 end-0 quick-anchor-top hide"> <i
      class="fa-solid fa-arrow-up"></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);
}

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



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 = 250) {
  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()) );

uj5u.com熱心網友回復：

JavaScript 代碼作業正常：出現了show和hideCSS 類名稱。問題出在 CSS 中。因此，要修復它，請嘗試以下操作：

.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);
}

uj5u.com熱心網友回復：

當頁面剛加載時你不需要設定

class="bottom-0 end-0 quick-anchor-top hide"

將標簽更改為

 <a href="#header-title-1" id="customID" > <i
        class="fa-solid fa-arrow-up"></i></a>

將您的 if else 更改為

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

uj5u.com熱心網友回復：

這不是添加或洗掉類的正確方法。此外，我建議根據您需要如何處理事件來使用去抖動或節流，因為滾動事件可以在一秒鐘內運行數百次。

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 = 250) {
  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()) );

標籤：javascript网页格式CSS推特引导程序前端

上一篇：如果沒有空格且文本換行，則使制表符寬度等于或適合高度

下一篇：我正在嘗試使用“bootstrap”定位影像卡以覆寫卡頂部邊框，需要幫助。或者我只能用CSS來做？