91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

JS實現回到頁面頂部的五種寫法(從實現到增強)

js
小億
206
2024-01-11 06:12:18
欄目: 編程語言

  1. 使用window.scrollTo或document.documentElement.scrollTop方法實現:
function scrollToTop() {
  window.scrollTo(0, 0);
}
  1. 使用window.scrollTo方法結合requestAnimationFrame實現平滑滾動效果:
function smoothScrollToTop() {
  const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
  if (currentScroll > 0) {
    window.requestAnimationFrame(smoothScrollToTop);
    window.scrollTo(0, currentScroll - (currentScroll / 8));
  }
}
  1. 使用scrollIntoView方法實現滾動到指定元素的頂部:
function scrollToElementTop(element) {
  element.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
  1. 使用animate方法實現平滑滾動效果:
function animateScrollToTop(duration) {
  const start = document.documentElement.scrollTop || document.body.scrollTop;
  const target = 0;
  const distance = target - start;
  const startTime = performance.now();
  
  function step() {
    const currentTime = performance.now();
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const easing = function(t) { return t * (2 - t); }; // 緩動函數,例如使用二次方函數
    const position = start + distance * easing(progress);
    
    window.scrollTo(0, position);
    
    if (progress < 1) {
      window.requestAnimationFrame(step);
    }
  }
  
  window.requestAnimationFrame(step);
}
  1. 增強版本:添加按鈕元素,并綁定點擊事件:
<button id="scrollToTopBtn">回到頂部</button>
document.getElementById('scrollToTopBtn').addEventListener('click', scrollToTop);

function scrollToTop() {
  window.scrollTo({ top: 0, behavior: 'smooth' });
}

以上是五種常見的回到頁面頂部的實現方法,從最基本的滾動到頂部到增強版帶有平滑滾動效果和按鈕點擊事件的寫法。可以根據具體需求選擇相應的方法來實現回到頁面頂部的功能。

0
体育| 台湾省| 内江市| 黔东| 大足县| 防城港市| 蕉岭县| 根河市| 伽师县| 京山县| 阳泉市| 英山县| 玛多县| 明溪县| 嘉黎县| 南阳市| 平阳县| 天水市| 马鞍山市| 平武县| 尚志市| 龙江县| 剑川县| 文昌市| 泉州市| 宣武区| 潞西市| 驻马店市| 烟台市| 怀来县| 彭山县| 诸城市| 嘉义市| 南川市| 万全县| 宁远县| 浪卡子县| 光泽县| 大邑县| 东城区| 清徐县|