Question

我已经在一个寻呼机上创建了平滑的滚动导航。这似乎可行，但是在滚动结束时，我的页面奇怪地“跳转”。

http://ontop.houston-1.hybridmedia.be/

我的jQuery代码非常简单明了：

jQuery(function(){
    $('a[href*="#"]').on('click', function (el) {
        el.preventDefault();

        $('html, body').animate({
        scrollTop: $($(this).attr('href')).offset().top
        }, 500, 'linear');
    });
});

在HTML中：

<a href="#story">story</a>

<section id="story">
</section>

这是怎么回事？我已经尝试过其他一些脚本，但是必须要解决相同的问题。

Answer 1

通过不添加主题标签并在链接元素中添加数据属性将其修复

<a data-tag="story" class="primary-nav__list__item__link scroll">story</a>

<section id="story"></section>

我的jQuery代码：

jQuery(function(){
    $('a.scroll').on('click', function (el) {
        el.preventDefault();

        href = $(this).data('tag');

        $('html, body').animate({
            scrollTop: $('#'+ href).offset().top - 150
        }, 500);
    });
});

jQuery平滑滚动最终结束

1 个答案: