如何用纯JavaScript实现回到顶部且不向URL添加#符号

问题核心原因 #

你遇到的URL带#的问题是两个原因共同导致的：

• <a href="#">标签的默认跳转行为会自动在URL末尾追加哈希值，同时在浏览器历史记录中新增一条记录，所以才会出现需要点两次返回的情况
• 现有JS代码仅实现了回到顶部按钮的滚动显隐逻辑，没有绑定点击事件处理函数，点击时直接走了a标签的默认跳转逻辑，你之前换成button没生效也是因为缺少了点击回到顶部的执行逻辑

修复方案（无需修改现有HTML，仅改JS即可） #

直接在现有JS的「Back to top button」逻辑块中添加点击事件监听，阻止a标签默认行为，同时加入回到顶部的逻辑即可，现有代码已经封装好了on事件监听函数，可以直接调用：
修改后的完整JS代码如下：

(function () {
    /**
       * Easy selector helper function
       */
      const select = (el, all = false) => {
        el = el.trim()
        if (all) {
          return [...document.querySelectorAll(el)]
        } else {
          return document.querySelector(el)
        }
      }
    
      /**
       * Easy event listener function
       */
      const on = (type, el, listener, all = false) => {
        let selectEl = select(el, all)
        if (selectEl) {
          if (all) {
            selectEl.forEach(e => e.addEventListener(type, listener))
          } else {
            selectEl.addEventListener(type, listener)
          }
        }
      }
    
      /**
       * Easy on scroll event listener 
       */
      const onscroll = (el, listener) => {
        el.addEventListener('scroll', listener)
      }
            
    
      /**
       * Back to top button
       */
      let backtotop = select('.back-to-top')
      if (backtotop) {
        const toggleBacktotop = () => {
          if (window.scrollY > 100) {
            backtotop.classList.add('active')
          } else {
            backtotop.classList.remove('active')
          }
        }
        // 新增：点击回到顶部逻辑
        on('click', '.back-to-top', (e) => {
          // 阻止a标签默认跳转行为，就不会新增#到URL了
          e.preventDefault()
          // 平滑滚动到顶部，不需要平滑可以把behavior参数去掉直接写window.scrollTo(0, 0)
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          })
        })
        window.addEventListener('load', toggleBacktotop)
        onscroll(document, toggleBacktotop)
      }
})();

可选优化：换成button标签（更符合语义，不需要阻止默认行为） #

如果你想用更规范的button标签，修改HTML如下：

<button class="back-to-top">
  <i class="bi bi-arrow-up-short"></i>
</button>

然后给button加基础样式重置，保证和原来a标签的视觉效果一致即可：

.back-to-top {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  /* 其余原有.back-to-top的样式保留即可 */
}

JS部分和上面修改后的代码一致，只是不需要写e.preventDefault()也可以正常生效。

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