jQuery平滑滚动到底跳转

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);
    });
});