如何在屏幕底部添加点击可跳转新文本页面的按钮？

整个功能分两步实现，不需要复杂逻辑，原生HTML/CSS就能搞定：

1. 给目标文本区块加锚点标识 #

找到需要跳转到的新文本所属的页面区块，给它加上唯一的id属性作为锚点标识，示例：

<!-- 你要跳转抵达的文本区块 -->
<div id="new-content-block">
  这里放置对应新文本内容
</div>

2. 编写固定在底部的跳转按钮 #

用锚点链接实现跳转，配合CSS固定定位把按钮钉在屏幕底部，完整可直接用的代码：

<!-- 底部跳转按钮 -->
<a href="#new-content-block" class="bottom-jump-btn">查看新内容</a>

<style>
.bottom-jump-btn {
  /* 固定定位钉在视口底部 */
  position: fixed;
  bottom: 24px; /* 距离屏幕底部的距离可自行调整 */
  left: 50%;
  transform: translateX(-50%); /* 实现水平居中 */
  padding: 12px 28px;
  background-color: #1677ff;
  color: #fff;
  border-radius: 6px;
  text-decoration: none; /* 清除链接默认下划线 */
  z-index: 1000; /* 避免被其他页面内容遮挡 */
}
</style>

体验优化（可选） #

默认点击按钮是直接跳转到目标位置，想要实现平滑滚动过渡的效果，只需要在全局CSS中添加一行配置：

html {
  scroll-behavior: smooth;
}

如果你使用的是Vue、React这类单页应用框架，只需要把原生a标签替换成框架自带的路由跳转组件（比如Vue的router-link、React的Link），href属性对应改成组件要求的锚点配置即可，核心逻辑不变。

内容的提问来源于stack exchange，提问作者Musical Climate.