如何防止页面内跳转链接触发重载导致视频与Typed.js重置

问题原因 #

点击页面内锚点链接时视频重启、Typed.js重新执行，通常是因为链接默认行为被前端框架（比如Rails Turbo）拦截触发页面重载，或是浏览器默认锚点跳转逻辑意外触发了DOM初始化代码重复执行。

具体解决方案 #

1. 自定义JS实现平滑滚动，拦截默认行为 #

直接通过JavaScript手动控制滚动，避免触发页面重载：

// 获取跳转按钮和目标区块
const downBtn = document.getElementById('down');
const aboutSection = document.getElementById('about');

downBtn.addEventListener('click', (e) => {
  // 阻止浏览器默认锚点跳转行为
  e.preventDefault();
  // 平滑滚动到目标区域
  aboutSection.scrollIntoView({
    behavior: 'smooth',
    block: 'start'
  });
});

2. 禁用Turbo拦截（针对Rails项目） #

如果你的项目使用了Turbo Drive，给锚点链接添加data-turbo="false"属性，让Turbo跳过对该链接的拦截：

<a href="#about" id="down" data-turbo="false">
  <i class="fa-solid fa-chevron-down blinking"></i>
</a>

3. 确保Typed.js仅初始化一次 #

修改Typed.js的初始化代码，添加初始化标记，避免重复执行打字动画：

const typedElement = document.querySelector('[data-controller="typed-js"]');
// 检查是否已初始化过
if (!typedElement.dataset.typedInitialized) {
  new Typed(typedElement, {
    strings: ['替换成你的打字文本内容'],
    typeSpeed: 50,
    // 其他配置参数...
  });
  // 添加标记，标记已初始化
  typedElement.dataset.typedInitialized = 'true';
}

4. 视频进度保持（可选） #

如果视频仍出现异常重启，可以监听滚动事件保存和恢复播放进度：

const video = document.getElementById('myvideo');
let savedTime = 0;

// 监听滚动，保存/恢复视频进度
window.addEventListener('scroll', () => {
  const videoRect = video.getBoundingClientRect();
  const isOutOfView = videoRect.bottom < 0 || videoRect.top > window.innerHeight;
  
  if (isOutOfView) {
    savedTime = video.currentTime;
  } else if (video.currentTime !== savedTime) {
    video.currentTime = savedTime;
  }
});

内容的提问来源于stack exchange，提问作者Nostalgia