Question

我正在使用以下JavaScript为我的页面执行平滑滚动。

$(function(){
    $('a[href*="#"]:not([href="#"])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

这样可以正常工作，但它对我的模态有不良影响，因为它会阻止模态打开。我的滚动HTML：

<a href="#location" class="btn btn-circle">
    <i class="fa fa-5x fa-angle-double-down animated"></i>
</a>

对于我的模态：

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" class="collapsed"  href="#1">
                    <span>Press for magic</span>
                </a>
            </h4>
        </div>
        <div class="collapse panel-collapse" id="1">
            <div class="panel-body">
                <p>Some magic here...</p>
            </div>
        </div>
    </div>
</div>

有没有办法修改JavaScript只对滚动产生影响并单独留下模态？

Answer 1

只需将点击功能中的a[href*="#"]:not([href="#"])替换为类名，然后将此类名放在<a>标记中，如下所示：

$(function(){
    $('.hashscroll').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });
});

和

<a class="hashscroll" href="#location" class="btn btn-circle">
    <i class="fa fa-5x fa-angle-double-down animated"></i>
</a>

Answer 2

不要为整个页面制作动画。只需动画你要移动的内容。

<body>
    <div class="animateThis"></div>
    <div class="modal"></div>
</body>

平滑滚动JavaScript影响模态功能

2 个答案: