2021-04-22 最简单的两种回到顶部方法

原创已于 2023-01-04 11:09:44 修改 · 208 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

于 2021-04-22 16:46:13 首次发布

基础专栏收录该内容

14 篇文章

订阅专栏

本文介绍了两种网页导航策略：锚点法，通过`navTo`函数实现点击tab栏快速跳转，以及常规的顶部返回方法，通过scrollIntoView和定时器操作实现平滑滚动。这两种技术有助于提升用户体验和网站结构管理。

锚点法（更适用于点击tab栏多地跳转）


 <div className="top-button" onClick={() => navTo("top")}>

===================================================================

const navTo = id => {
    let node = document.querySelector(`#nav-${id}`);
    //nav-top 是你想回到的位置，也就是那个地方的id名
    node.scrollIntoView({
      behavior: "smooth"
    });
  };

常规法（直接回到顶部）

navTo = () => {
    let timer = setInterval(function () {
      scrollTo(0, scrollY - 50)
      if (scrollY <= 0) {
        // 如果滚动顶部就清除
        clearInterval(timer)
      }
    }, 20)
  }