无HTML文件权限时，如何通过Javascript注入Return2top锚点？

具体实现方案 #

1. 注入JavaScript代码 #

这段代码会创建你需要的返回顶部元素，添加到页面末尾，并实现点击返回顶部的功能，还能根据滚动状态自动显示/隐藏按钮：

// 插入返回顶部按钮的HTML结构
document.body.insertAdjacentHTML('beforeend', '<p><a href="javascript:" id="return-to-top"><i class="fa fa-chevron-up"></i></a></p>');

// 获取按钮元素并绑定点击事件
const returnTopBtn = document.getElementById('return-to-top');
returnTopBtn.addEventListener('click', () => {
  // 平滑滚动到页面顶部
  window.scrollTo({ top: 0, behavior: 'smooth' });
});

// 滚动时切换按钮显示状态
window.addEventListener('scroll', () => {
  returnTopBtn.style.display = window.pageYOffset > 300 ? 'block' : 'none';
});

2. 注入CSS样式（优化按钮显示效果） #

配合JS注入以下CSS，让按钮固定在页面右下角，样式更美观：

#return-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: rgba(0,0,0,0.5);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  text-decoration: none;
  display: none;
  z-index: 9999;
}

#return-to-top:hover {
  background: rgba(0,0,0,0.7);
}

#return-to-top i {
  font-size: 20px;
}

注意事项 #

如果你的网店页面没有引入Font Awesome图标库，<i class="fa fa-chevron-up"></i>会显示为空。这种情况下可以替换成纯文本图标，比如把这段改成<span>↑</span>，或者用CSS伪元素实现箭头：

#return-to-top::before {
  content: '↑';
}

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