javascript - 自动滚动不会滚动到元素，损坏的 JS

Question

我有一个按钮，它应该向下滚动到另一个元素，但在回退时(例如，JS 不起作用)转到联系我们页面。

代码本身不工作，它甚至不会记录到控制台。有任何修复吗？

    $('.btn').on('click', function (e) {
    e.preventDefault();
    console.log("test");
    $('html, body').animate({
        scrollTop: ($('.contactSplit').offset().top)
    }, 500);
})


<a class="btn btn--primary" href="https://hannahlondon.com/contact-us/">SPEAK TO ONE OF OUR EXPERTS</a>

Answer 1

只要您还有一个包含 contactSplit 类的元素，您的代码就可以正常工作。看这个片段:

$('.btn').on('click', function (e) {
    e.preventDefault();
    console.log("test");
    $('html, body').animate({
        scrollTop: ($('.contactSplit').offset().top + 20)
    }, 500);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="btn btn--primary" href="">SPEAK TO ONE OF OUR EXPERTS</a>
<div style="height:500px">Content</div>
<div class="contactSplit">Contact Us</div>
<div class="footer">Footer</div>

在 Windows 上尝试使用 Shift + F5 或在 MacOS 上使用 Shift + CMD + R 进行“硬刷新”