Question

请以see here为例。在Chrome中，您点击其中一个锚点链接，然后使用相应的div id平滑地向下滚动到该部分上方100px。出于某种原因在Firefox中，它可以很好地平滑滚动，但随后会出现故障，因此页面会滚动切入此部分的<h2>，而不是100px以上。很抱歉，如果解释得不好，希望你能看到我对这个例子的意思。

以下是用于平滑滚动的jquery：

<script>
    $(document).ready(function(){
        $('a[href^="#"]').on('click',function (e) {
            e.preventDefault();

            var target = this.hash;
            var $target = $(target);

            $('html, body').stop().animate({
                'scrollTop': $target.offset().top -100
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        });
    });

    $(function() {
        $('.slider').unslider({
            dots: true,
            fluid: true,
            delay: 10000
        });
    });
</script>

Answer 1

问题出在页面底部的脚本中：

    <script>
        $(document).ready(function(){
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                var $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top -100
                }, 900, 'swing', function () {
                    window.location.hash = target; // Right here
                });
            });
        });
    </script>

修改hash以反映-100：

    $(document).ready(function(){
            $('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                var target = this.hash;
                var $target = $(target);

                $('html, body').stop().animate({
                    'scrollTop': $target.offset().top -100
                }, 900, 'swing', function () {
                    window.location.hash = target -100; // Like so
                });
            });
        });

随时在这里寻找证据：

http://jsfiddle.net/zkyz6m5m/

通过哈希告诉窗口位置，它在初始示例中的函数回调期间跳转到实际锚点而不是-100。

在Firefox中平滑滚动故障，在Chrome中很好

1 个答案: