【Web】用浏览器书签做一个回到顶部/底部的小按钮

仅需两分钟，用收藏夹做一个回到顶部/底部的按钮
原理：收藏夹可以执行JS代码，使用scrollTo方法实现滚动

开始

第一步

• 添加书签（Chrome快捷键Ctrl+D），点击“更多”
  

第二步：回到顶部

• 改个名
• 网址栏粘贴代码：javascript:(function(){window.scrollTo(0, 0);})();
• 保存即可
  

第三步：回到底部

• 重复第一步
• 改个名
• 网址栏粘贴代码：javascript:(function(){window.scrollTo(0, document.documentElement.scrollHeight);})();
• done
  

第四步：看看效果（不够丝滑？见补充二）

补充一：火狐

第一步：打开书签管理器（Ctrl+Shift+B），在想要添加的位置右键 => 新建书签

第二/三步：参考Chrome（修改名称 => 粘贴 => 保存）

第四步：测一测

补充二：平滑滚动

利用scrollTo的behavior属性设置平滑滚动

顶部
javascript:(function(){window.scrollTo({top:0,behavior:'smooth'})})()

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

底部
javascript:(function(){window.scrollTo({top:document.documentElement.scrollHeight,behavior:'smooth'})})()

javascript:(function(){
  window.scrollTo({
    top:document.documentElement.scrollHeight,
    behavior:'smooth'
  })
})()

补充三：所有元素平滑滚动至顶部/底部

利用document.all获取页面所有元素，遍历（非标准方法 ❌ 项目里别用）

顶部
javascript:(function(){for(let el of document.all){el.scrollTo({top:0,behavior:'smooth'})}})()

javascript:(function(){
  for(let el of document.all){
    el.scrollTo({
      top:0,
      behavior:'smooth'
    })
  }
})()

底部
javascript:(function(){for(let el of document.all){el.scrollTo({top:document.documentElement.scrollHeight,behavior:'smooth'})}})()

javascript:(function(){
  for(let el of document.all){
    el.scrollTo({
      top:document.documentElement.scrollHeight,
      behavior:'smooth'
    })
  }
})()