最简单的静态文本链接
这种方法最简单，但体验较差,没有动画效果。
-
找到模板文件 打开您的网站模板文件夹，通常是
/templets/您的模板名称/。 找到并打开footer.htm文件，这个文件通常用于存放页脚信息，是放置“返回顶部”链接的绝佳位置。 -
添加代码 在
footer.htm文件中的合适位置（在版权信息的后面）添加以下HTML代码：<a href="#top">返回顶部</a>
- 注意：确保您的页面顶部有一个
id="top"的元素。<body>标签或者一个包裹整个页面的<div>就可以，如果不确定，可以在您的模板头部文件（如head.htm）中的<body>标签里添加id="top"，<body id="top">。
- 注意：确保您的页面顶部有一个
缺点：点击后会瞬间跳转，没有平滑滚动效果,用户体验一般。
带平滑滚动效果的返回顶部（推荐）
这是最常用且效果最好的方法，结合了HTML、CSS和JavaScript。
步骤 1：修改模板文件 (HTML部分)
同样，我们修改 为了让“返回顶部”按钮更美观,我们需要为它添加CSS样式。 方法A：直接添加到模板的CSS文件中 方法B：直接写在模板文件中（不推荐，但方便）
如果您不想修改CSS文件，也可以直接在 这是实现“返回顶部”核心功能的部分，包括滚动一定距离后才显示按钮,以及点击后平滑滚动到顶部。 方法A：直接添加到模板的JS文件中 方法B：直接写在模板文件中
同样，如果您不想修改JS文件，可以在 这种方法利用了织梦的通用JS库，将代码统一放在 强烈推荐使用方法三，因为它最符合织梦CMS的开发习惯，便于后期维护，如果您不想修改核心PHP文件，那么方法二是次优选择,也能达到非常好的效果。 请根据您的技术能力和网站架构选择最适合您的方法。footer.htm 文件，在合适的位置添加一个按钮的HTML结构，通常使用 <a> 标签或 <div>
<!-- 在 footer.htm 中添加 -->
<a href="javascript:;" id="back-to-top">返回顶部</a>
href="javascript:;"：这是一个空链接,防止页面跳转。id="back-to-top"：给这个元素一个唯一的ID,方便我们用CSS和JavaScript来控制它。步骤 2：添加CSS样式 (美化按钮)
/templets/您的模板名称/style/ 目录下，文件名可能是 style.css、main.css 等。/* 返回顶部按钮样式 */
#back-to-top {
display: none; /* 默认隐藏 */
position: fixed; /* 固定定位 */
right: 20px; /* 距离右边20px */
bottom: 50px; /* 距离底部50px */
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #333; /* 按钮背景色 */
color: #fff; /* 按钮文字颜色 */
text-decoration: none; /* 去掉下划线 */
border-radius: 50%; /* 圆角，变成圆形 */
font-size: 18px;
opacity: 0.8; /* 透明度 */
z-index: 9999; /* 确保按钮在最上层 */
transition: opacity 0.3s ease-in-out; /* 鼠标悬停时的过渡效果 */
}
#back-to-top:hover {
opacity: 1; /* 鼠标悬停时完全不透明 */
}
/* 如果希望用图标代替文字，可以这样 */
/*
#back-to-top::before {
content: "↑"; /* 使用向上的箭头作为图标 */
}
#back-to-top {
text-indent: -9999px; /* 隐藏文字 */
}
*/
footer.htm 文件的 <head> 标签内（如果模板支持）或最底部使用 <style> 标签嵌入CSS代码。<style>
/* 将上面的CSS代码粘贴到这里 */
</style>
步骤 3：添加JavaScript代码 (实现功能)
/templets/您的模板名称/js/ 目录下，文件名可能是 common.js、main.js 等。// 返回顶部功能
$(function() {
// 获取返回顶部按钮
var backToTop = $("#back-to-top");
// 滚动事件
$(window).scroll(function() {
// 当页面滚动超过100像素时，显示按钮
if ($(this).scrollTop() > 100) {
backToTop.fadeIn();
} else {
// 否则隐藏按钮
backToTop.fadeOut();
}
});
// 点击按钮事件
backToTop.on('click', function(e) {
// 阻止默认行为
e.preventDefault();
// 使用animate实现平滑滚动到顶部
$('html, body').animate({
scrollTop: 0
}, 800); // 800毫秒内完成滚动
});
});
head.htm 文件中会有类似 <script src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> 或 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 的代码。footer.htm 文件的最底部（</body> 标签之前）使用 <script> 标签嵌入JS代码。<script>
// 将上面的JavaScript代码粘贴到这里
</script>
织梦DedeCMS通用方法（推荐）
plus 目录下,更符合织梦的架构。步骤 1：创建或修改JS文件
plus 目录：/dede/plus/。footer_js.php 文件,这是织梦在页面底部自动引入的JS文件。footer_js.php 文件的末尾，在 ?> 之前,添加以下代码：// 返回顶部功能
echo <<<JS
<script>
$(function() {
// 获取返回顶部按钮
var backToTop = $("#back-to-top");
// 滚动事件
$(window).scroll(function() {
// 当页面滚动超过100像素时，显示按钮
if ($(this).scrollTop() > 100) {
backToTop.fadeIn();
} else {
// 否则隐藏按钮
backToTop.fadeOut();
}
});
// 点击按钮事件
backToTop.on('click', function(e) {
// 阻止默认行为
e.preventDefault();
// 使用animate实现平滑滚动到顶部
$('html, body').animate({
scrollTop: 0
}, 800); // 800毫秒内完成滚动
});
});
</script>
JS;
{dede:include filename='footer.htm'/} 的页面中自动加载,无需手动在每个模板中引入。步骤 2：修改模板文件
footer.htm）中添加按钮的HTML和CSS。<a href="javascript:;" id="back-to-top">↑</a>
footer_js.php输出的JS代码在</body>前，CSS可以放在<head>部分的</head>标签之前。<style>
/* 将上面的CSS代码粘贴到这里 */
</style>
总结与建议
方法
优点
缺点
推荐度
方法一
极其简单，无需JS
体验差，无动画
⭐
方法二
效果好，体验佳
需要手动在模板中修改CSS和JS
⭐⭐⭐⭐
方法三
最规范，符合织梦架构，修改一处全局生效
需要修改
footer_js.php文件⭐⭐⭐⭐⭐
