Question

我为我的网站上的内部链接滚动gestion添加了这个脚本：

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

脚本无法正常运行。在第一个clic，我们去了正确的地方，但滚动不起作用。但是，从第二次单击开始，滚动工作正常。

编辑：

我的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");

这仍然会导致视口滚动;它或多或少等同于单击链接。您可以使用the History API推送新网址，而不会导致其被“访问”：

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。

Answer 2

您的代码应为：

$(document).ready(function () {
    // Pour tous les liens commençant par #.
    $("a[href^='#']").click(function (e) {

        $('body, html').animate({
            scrollTop: $($(this).attr("href")).offset().top - 72
        }, 'slow', function () {
            // On ajoute le hash dans l'url.
            window.location.hash = $(this).attr("href");
        });

        return false
    });
});

scrillTop js脚本无法正常工作

2 个答案: