平滑滚动 JavaScript 影响模式功能

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

不要为整个页面设置动画。只需为您要移动的内容设置动画即可。

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

Answer 2

只需将点击函数中的 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>

平滑滚动 JavaScript 影响模式功能

Smooth scrolling JavaScript affecting Modal functionality

html

javascript

twitter-bootstrap

bootstrap-modal