Question

我已经实现了一个滚动条，用于导航到完美运行的部分。现在我想在一个部分中添加锚点，所以如果你点击它们，它们会顺畅地向下滚动页面到其他锚点。我正在尝试在现有功能中添加功能，但无济于事。

我正在使用“jquery.easing.pack.js”。

在原版中我有HTML和JS看起来像这样：

<!-- scroll left to sections -->
<section id="1" class="section"></section>
<section id="2" class="section"></section>
<section id="3" class="section"></section>

<script type="text/javascript">
$(function() {
        var $sections = $('section.section');

        $sections.each(function() {
            var $section = $(this);
            var hash = '#' + this.id;

            $('a[href="' + hash + '"]').click(function(event) {
                $scrollElement.stop().animate({
                    scrollLeft: $section.offset().left
                }, 1200, 'easeOutCubic', function() {
                    window.location.hash = hash;
                });

                event.preventDefault();
            });
        });

    });
</script>

现在我有：

<!-- scroll left to sections -->
<section id="1" class="section">
    <a class="scroll-down" href="#bottom-div">scroll down</a><!-- scroll down to div -->
<div id="bottom-div>here we go</div>
</section>
<section id="2" class="section"></section>
<section id="3" class="section"></section>

目前，如果我点击“向下滚动”锚点，它将转到bottom-div但不顺利。所以我尝试添加这样的另一个函数，但它没有工作..任何想法如何使它工作，如果可能的话，我现有的功能？

$(function() {
            var $bottomdivs = $('.scroll-down');

            $bottomdivs.each(function() {
                var $bottomdiv = $(this);
                var hash = '#' + this.id;

                $('a[href="' + hash + '"]').click(function(event) {
                    $scrollElement.stop().animate({
                        scrollTop: $bottomdiv.offset().top-100
                    }, 1200, 'easeOutCubic', function() {
                        window.location.hash = hash;
                    });

                    event.preventDefault();
                });
            });

        });

Answer 1

通过设置哈希，我认为您正在调用标准锚链接功能来跳转到该部分。尝试自己处理滚动：

var $sections = $('section.section');

$sections.each(function() {
    var $section = $(this);
    var hash = '#' + this.id;

    $('a[href="' + hash + '"]').click(function(event) {

        $('body, html').animate({
            scrollLeft: $section.offset().left
        }, {queue:false, duration: 1200, easing: 'swing'});

        $('body, html').animate({
            scrollTop: $section.offset().top
        }, {queue:false, duration: 1200, easing: 'swing', done: function () {
            window.location.hash = hash;
            }
        });

    });

    event.preventDefault();
    });

我在这里为你准备了一个小提琴：http://jsfiddle.net/rjE4s/

我不确定$ scrollElement是什么，所以我从我的例子中删除了它。此外，我已经更改了您的自定义缓动，因为我没有安装缓动包。你可以改回来。最后，我对动画进行了排队，使左侧和顶部同时滚动，但您只需设置：

queue: true

在动画选项中，它会像原始函数一样为左侧和顶部设置动画。不确定你是否想要这个。

window.location.hash向下滚动不平滑只向左滚动

1 个答案: