仅当内容DIV文本足够时显示返回顶部按钮的无JS实现方案

首先明确：纯CSS无法精准检测容器内容是否溢出，但可以通过CSS新特性实现近似效果；PHP只能做基于文本长度的粗略判断，无法精确对应容器渲染高度。以下是可行的两种思路：

一、CSS近似实现（依赖:has()选择器） #

利用CSS的:has()选择器检测内容容器是否出现滚动条，从而控制按钮的显示隐藏，同时用锚点实现纯CSS返回顶部功能。

代码示例 #

<div class="content-container">
  <span id="content-anchor"></span>
  <!-- 这里是你的内容文本 -->
</div>
<a class="back-to-top" href="#content-anchor">回到顶部</a>

/* 内容容器设置固定高度，超出自动滚动 */
.content-container {
  height: 600px;
  overflow-y: auto;
  padding: 1rem;
}

/* 默认隐藏返回顶部按钮 */
.back-to-top {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 0.5rem 1rem;
  background: #333;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

/* 当内容容器存在滚动条时，显示按钮（仅支持现代浏览器） */
.content-container:has(::-webkit-scrollbar) + .back-to-top {
  display: block;
}

注意事项 #

• :has()选择器目前支持Chrome、Edge、Safari，Firefox需手动开启layout.css.has-selector.enabled配置；
• 该方法通过检测滚动条的存在判断内容溢出，部分浏览器的滚动条样式可能影响检测准确性。

二、PHP粗略判断（基于文本长度） #

通过PHP计算内容的字符数，设置阈值来决定是否输出返回顶部按钮，属于近似方案。

代码示例 #

<?php
// 你的内容文本
$content = "这里是网站的内容，可能很长也可能很短...";
// 设定字符阈值（根据容器高度、字体大小估算）
$overflowThreshold = 2500;
?>

<div class="content-container">
  <span id="content-anchor"></span>
  <?php echo $content; ?>
</div>

<?php if (mb_strlen($content) > $overflowThreshold): ?>
<a class="back-to-top" href="#content-anchor">回到顶部</a>
<?php endif; ?>

注意事项 #

• 该方法仅基于字符数判断，无法考虑字体大小、换行、图片等因素对容器高度的影响，精度有限；
• 若内容包含HTML标签，需先去除标签再计算纯文本长度，避免标签字符干扰判断。

补充说明 #

如果追求100%精准的溢出检测，目前无法脱离JavaScript实现——因为CSS没有原生的“内容溢出”检测逻辑，PHP也无法预知浏览器的渲染结果。但上述两种方案可以在不使用JS的前提下，满足大部分场景的需求。

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