单页网站点击按钮无跳转加载services.html至容器问题求助

1. 调整HTML结构 #

先把原按钮里的data-fancybox属性去掉（这是用来预览图片的，不适合加载HTML内容），给按钮加个自定义类比如load-services，同时在页面底部加一个用来承载服务详情的容器和关闭按钮：

<section class="single-items center-block parallax" id="corporate" style="background-color: cadetblue">
    <div class="container">
        <div class="row">
            <div class="col-md-5 col-sm-8 col-xs-11">
                <div class="area-heading text-start wow fadeInLeft">
                    <h3 class="area-title text-capitalize alt-font text-white mb-2 font-weight-100">
                        <a data-fancybox="group-three" href="images/single-portfolio3.jpg">Complete <strong>Services</strong></a>
                    </h3>
                    <p class="text-white">For a full list click below</p>
                    <!-- 修改按钮，去掉fancybox属性，添加自定义类 -->
                    <a class="btn btn-transparent-white btn-rounded btn-large mt-4 load-services">View More</a>
                </div>
            </div>
            <div class="col-md-7 col-sm-4 col-xs-1"></div>
        </div>
    </div>
    <div class="hidden">
        <a data-fancybox="group-three" data-thumb="images/gallery-thumb1.jpg" href="images/gallery-thumb1.jpg"></a>
        <a data-fancybox="group-three" data-thumb="images/gallery-thumb2.jpg" href="images/gallery-thumb2.jpg"></a>
        <a data-fancybox="group-three" data-thumb="images/gallery-thumb3.jpg" href="images/gallery-thumb3.jpg"></a>
        <a data-fancybox="group-three" data-thumb="images/gallery-thumb4.jpg" href="images/gallery-thumb4.jpg"></a>
        <a data-fancybox="group-three" data-thumb="images/gallery-thumb5.jpg" href="images/gallery-thumb5.jpg"></a>
    </div>
</section>

<!-- 添加服务详情容器 -->
<div class="services-overlay"></div>
<div class="services-content-container">
    <button class="close-services">×</button>
    <div class="services-content"></div>
</div>

2. 添加CSS样式 #

实现右侧滑入动画、遮罩层和容器样式：

/* 遮罩层：点击按钮后覆盖整个页面，背景变暗 */
.services-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 999;
    display: none;
}

/* 内容容器：默认在页面右侧外，滑入时移动到可视区域 */
.services-content-container {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 800px;
    height: 100%;
    background-color: #fff;
    z-index: 1000;
    overflow-y: auto;
    padding: 2rem;
    transition: right 0.3s ease-in-out;
}

/* 滑入动画类 */
.services-content-container.slide-in {
    right: 0;
}

/* 关闭按钮样式 */
.close-services {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    border: none;
    background: transparent;
    cursor: pointer;
}

/* 适配小屏幕 */
@media (max-width: 768px) {
    .services-content-container {
        width: 100%;
    }
}

3. 编写JavaScript逻辑 #

用jQuery实现加载内容、滑入滑出以及位置记录：

$(document).ready(function() {
    let scrollPosition = 0;

    // 点击"查看更多"按钮
    $('.load-services').click(function(e) {
        e.preventDefault();
        // 记录当前滚动位置
        scrollPosition = $(window).scrollTop();
        // 显示遮罩层，加载内容并滑入容器
        $('.services-overlay').fadeIn();
        $('.services-content').load('services.html', function() {
            $('.services-content-container').addClass('slide-in');
        });
        // 锁定页面滚动
        $('body').css('overflow', 'hidden');
    });

    // 点击关闭按钮或遮罩层关闭
    $('.close-services, .services-overlay').click(function() {
        $('.services-content-container').removeClass('slide-in');
        $('.services-overlay').fadeOut();
        // 恢复页面滚动，回到之前的位置
        $('body').css('overflow', 'auto');
        $(window).scrollTop(scrollPosition);
        // 清空内容，避免下次加载重复
        $('.services-content').empty();
    });
});

关键说明 #

• 去掉了原按钮的data-fancybox属性，因为它是用来图片预览的，和加载HTML内容无关；
• 用jQuery的load()方法异步加载services.html的内容，确保不跳转页面；
• 记录点击按钮时的滚动位置，关闭后通过scrollTop()回到原位置；
• 用CSS的transition实现平滑的右侧滑入/滑出动画；
• 遮罩层用来增强用户体验，防止点击页面其他区域。

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