织梦列表页翻页JS代码如何实现？-织梦建站-盈思创科技

原生JS实现平滑滚动（最常用）

这种方案不改变翻页的本质（仍然是页面跳转），但能优化用户体验，当用户点击“下一页”时，页面会平滑滚动到顶部,而不是生硬地跳转。

（图片来源网络，侵删）

适用场景：所有织梦默认的列表页,只需添加少量JS代码即可。

实现步骤：

打开你的列表页模板文件 通常位于 /templets/你的模板名称/list_article.htm。

在页面底部找到 </body> 标签，在其前添加以下JS代码

（图片来源网络，侵删）

<script>
// 织梦列表页平滑滚动到顶部
(function(){
    // 获取所有包含翻页链接的元素，织梦默认的class是"pagebox"
    var pageLinks = document.getElementsByClassName('pagebox');
    if(pageLinks && pageLinks.length > 0) {
        // 获取第一个翻页链接容器内的所有<a>标签
        var links = pageLinks[0].getElementsByTagName('a');
        for (var i = 0; i < links.length; i++) {
            // 为每个翻页链接添加点击事件
            links[i].onclick = function(){
                // 使用平滑滚动效果，滚动到页面顶部
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
                // 返回true，让链接正常执行其默认的页面跳转行为
                return true;
            };
        }
    }
})();
</script>

保存模板并生成列表页

当你在列表页点击“首页”、“上一页”、“下一页”或“末页”时，页面会平滑地滚动到顶部,而不是瞬间跳转。

jQuery实现平滑滚动

如果你的模板已经加载了jQuery库,使用jQuery实现会更简洁。

适用场景：模板中已引入jQuery。

实现步骤：

打开你的列表页模板文件 (list_article.htm)。
确保页面已加载jQuery（通常在头部 <head> 区域会有类似代码 <script src="{dede:global.cfg_cmsurl/}/include/dedeajax2.js"></script> 或直接引用CDN）。

在页面底部 </body> 标签前添加以下JS代码

<script>
// 使用jQuery实现平滑滚动
$(document).ready(function(){
    // 织梦默认的翻页容器class是"pagebox"
    $('.pagebox a').on('click', function(e){
        // 阻止默认的页面跳转行为
        e.preventDefault(); 
        // 获取点击链接的href地址
        var href = $(this).attr('href');
        // 平滑滚动到顶部
        $('html, body').animate({
            scrollTop: 0
        }, 500); // 500毫秒的滚动动画
        // 滚动完成后，再执行页面跳转
        setTimeout(function(){
            window.location.href = href;
        }, 500);
    });
});
</script>

AJAX无刷新翻页（高级功能）

这是用户体验最好的方案，点击翻页时，页面不会整体刷新，只有列表内容区域会重新加载，速度更快,体验更流畅。

实现步骤：

修改列表页模板 (list_article.htm)
- 区域加一个ID：找到 {dede:list} 标签包裹的列表部分，给它一个唯一的ID，id="article-list"。
```
<div id="article-list">
{dede:list pagesize='10'}
<li>
    <a href="[field:arcurl/]">[field:title/]</a>
    <span>[field:pubdate function="MyDate('Y-m-d',@me)"/]</span>
</li>
{/dede:list}
</div>
```
{dede:pagelist listsize='4' listitem='index pre pageno next end '/}
```

引入jQuery库（如果还没有）在 <head> 区域添加：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

编写AJAX翻页JS代码 在页面底部 </body> 标签前添加以下代码：

<script>
$(document).ready(function(){
    // 点击翻页链接时触发
    $('.pagebox a').on('click', function(e){
        e.preventDefault(); // 阻止默认跳转
        var href = $(this).attr('href'); // 获取下一页的URL
        // 显示一个加载提示（可选）
        $('#article-list').html('<div style="text-align:center;">加载中...</div>');
        // 发起AJAX请求
        $.ajax({
            url: href,
            type: 'GET',
            dataType: 'html', // 期望返回HTML数据
            success: function(response){
                // 1. 从返回的完整HTML中，提取出新的列表内容
                var newArticleList = $(response).find('#article-list').html();
                // 2. 从返回的HTML中，提取出新的翻页代码
                var newPageBox = $(response).find('.pagebox').html();
                // 3. 更新当前页面的列表内容
                $('#article-list').html(newArticleList);
                // 4. 更新当前页面的翻页代码
                $('.pagebox').html(newPageBox);
                // 5. 滚动到列表顶部（可选，提升体验）
                $('html, body').animate({
                    scrollTop: $('#article-list').offset().top - 20
                }, 300);
            },
            error: function(){
                $('#article-list').html('加载失败，请刷新页面重试。');
            }
        });
    });
});
</script>

AJAX方案的注意事项：

SEO：AJAX加载的内容对搜索引擎不够友好，但对于用户交互体验来说,这是目前最流行的方式。
浏览器历史记录：上面的代码不会改变浏览器地址栏的URL，用户无法通过“前进”/“后退”按钮来切换页面，如果需要这个功能，需要更复杂的代码来操作 history.pushState，对于大多数网站来说,这不是必需的。
织梦标签：确保AJAX请求返回的页面片段中，织梦的 {dede:list} 和 {dede:pagelist} 标签能被正确解析，这通常意味着你的后台需要开启“静态化”或“动态化”模式，并且AJAX请求的是动态页（如 plus/list.php?tid=...）或能正确解析模板的伪静态页。

方案	优点	缺点	适用场景
原生JS平滑滚动	简单、轻量、不依赖库	体验提升有限	所有列表页，快速优化体验
jQuery平滑滚动	代码简洁，兼容性好	需要jQuery库	已使用jQuery的模板
AJAX无刷新翻页	用户体验最佳，速度快	实现复杂，有SEO和浏览器历史记录问题	对用户体验要求高的现代化网站

对于大多数织梦用户来说，方案一（原生JS平滑滚动） 是最简单、最实用的选择，如果你的网站追求极致的用户体验，可以考虑方案三（AJAX无刷新翻页）。

织梦列表页翻页JS代码如何实现？

原生JS实现平滑滚动（最常用）

jQuery实现平滑滚动

AJAX无刷新翻页（高级功能）

相关文章

目录[+]