Prestashop首页(index.php)锚点滚动功能修复求助

别担心，我来帮你搞定这个仅在首页生效的锚点滚动功能！结合你的需求，我整理了一段可以直接用的代码，并且会一步步解释为啥这么写：

核心思路 #

咱们要实现的是：只在index.php（首页）触发，点击带linkscroll类的链接时，平滑滚动到对应锚点，同时偏移120px，动画时长2000ms。

完整代码 #

$(document).ready(function() {
    // 判断是否处于首页：兼容URL重写（首页为/）和非重写（首页为/index.php）的情况
    const isHomePage = window.location.pathname === '/' || window.location.pathname.includes('/index.php');
    
    if (isHomePage) {
        // 监听所有带linkscroll类的链接点击事件
        $('.linkscroll').on('click', function(e) {
            // 阻止浏览器默认的锚点跳转行为
            e.preventDefault();
            
            // 从链接的href中提取锚点ID（比如从index.php#some-anchor拿到some-anchor）
            const targetAnchorId = $(this).attr('href').split('#')[1];
            if (!targetAnchorId) return; // 如果没有锚点ID，直接终止
            
            // 找到页面中对应ID的锚点元素
            const targetElement = $('#' + targetAnchorId);
            if (!targetElement.length) return; // 如果锚点元素不存在，避免报错
            
            // 计算滚动目标位置：锚点元素顶部距离文档顶部的距离 - 120px偏移量
            const scrollTargetPosition = targetElement.offset().top - 120;
            
            // 执行平滑滚动动画，时长2000毫秒
            $('html, body').animate({
                scrollTop: scrollTargetPosition
            }, 2000);
        });
    }
});

代码解释 #

1. 首页判断：考虑到Prestashop可能开启了URL重写（首页URL变成/），所以同时判断两种情况，确保只在首页运行代码。
2. 阻止默认行为：如果不阻止，浏览器会直接跳转到锚点，覆盖咱们的平滑滚动效果。
3. 锚点ID提取：处理你的链接格式index.php#some-anchor，拆分出真实的锚点ID。
4. 元素存在性检查：避免因为锚点不存在导致控制台报错。
5. 偏移量处理：减去120px，确保滚动后锚点内容不会被顶部导航栏挡住。
6. 跨浏览器兼容：同时操作html和body元素，保证在Chrome、Firefox、Safari等浏览器都能正常触发滚动。

部署建议 #

把这段代码放在你主题的自定义JS文件里（比如themes/你的主题/js/custom.js），或者直接加到首页模板index.tpl的<script>标签中。如果是用Prestashop后台的“自定义代码”功能，记得放在</body>标签之前哦～

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