javascript - 将提交按钮平滑滚动到页面上的 div

Question

是否可以为提交按钮的页面 div 创建平滑的滚动行为？

我有一些类似的东西

<input type="submit" value="FREE QUOTE!" onclick="window.location.href = '#quote';">

这对 div 来说很好，但它会跳转。

对于页面上的其他 anchor 链接，我正在使用平滑滚动的 jQuery 脚本，它为它们创建平滑滚动:

$(document).on('click', 'a[href^="#"]', function (e) {
    e.preventDefault();
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1000, 'linear');
});

正如预期的那样，对于普通 anchor 来说，这很好，但是按钮跳转了。

我当然可以设置一个普通 anchor 的样式来使它具有此按钮的外观，但这完全破坏了设计。如果我使用 CSS scroll-behavior: smooth; , 然后我得到了这个按钮的平滑滚动，但是除了最近的浏览器之外似乎没有很好的支持。

有没有办法让提交按钮平滑地滚动到页面上的 div？我不介意按钮的滚动是否是普通 anchor 的单独脚本/过程，但我只想平滑地滚动到此按钮。

Answer 1

您可以创建另一个事件监听器，以自定义数据属性为目标，例如:data-scroll:

<input type="submit" value="FREE QUOTE!" data-scroll="#quote" />

这是对您的 JS 的快速更新:

function scrollTo($ele) {
    $('html, body').stop().animate({
        scrollTop: $ele.offset().top
    }, 1000, 'linear');
}

$(document).on('click', 'a[href^="#"]', function (e) {
    e.preventDefault();
    const $ele = $($(this).attr('href'));
    scrollTo($ele);
});

$(document).on('click', '[data-scroll]', function (e) {
    e.preventDefault();
    const $ele = $($(this).data('scroll'));
    scrollTo($ele);
});