javascript - scrillTop js 脚本无法正常工作

Question

我在我的网站上添加了用于内部链接滚动管理的脚本:

$(document).ready(function() {
    // Pour tous les liens commençant par #.
    $("a[href^='#']").click(function (e) {
        // On annule le comportement initial au cas ou la base soit différente de la page courante.
        e.preventDefault();


        // On ajoute le hash dans l'url.
        window.location.hash = $(this).attr("href");

        $('body').animate({
            scrollTop: $(window.location.hash).offset().top - 72
        }, 'slow');

        return false
    });
});

该脚本无法完美运行。在第一次点击时，我们正在正确的位置，但卷轴不起作用。但是，从第二次单击开始，滚动就可以正常工作。

编辑:

我的html代码:

<a class="link-icon visible-desktop" href="#home-keyNumbers-section"><img src="{{ asset('/bundles/visualimmersionsite/images/icons/Arrowhead-Down-256-hover.png') }}" alt="Scroller pour mieux nous connaître" /> </a>

<section id="home-keyNumbers-section" name="home-keyNumbers-section" class="designed-section-2 ">
        <div class="container">
            {%  include 'VisualImmersionSiteBundle:Site:templates/key_numbers_template.html.twig' %}
        </div>


    </section>

你有什么想法吗？

感谢您的帮助:)

Answer 1

window.location.hash = $(this).attr("href");

这仍然会导致视口(viewport)滚动；它或多或少相当于单击链接。您可以使用the History API推送新 URL 而不会导致其被“访问”:

history.pushState(null, null, $(this).attr('href'));

如果您需要支持 IE8 及更早版本，则可以保持当前滚动位置:

var originalScroll = window.scrollY; // Grab window.scrollX if applicable
window.location.hash = $(this).attr("href");
window.scrollY = originalScroll;

不过，您可能必须将 window.scrollY = originalScroll 放入 setTimeout 中，超时时间为 0。