Question

我使用了这段代码：

$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();
    var target = this.hash,
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 1000, 'swing', function () {
        window.location.hash = target;
    });
});

并且平滑滚动在链接和锚之间完美地工作！

但是如何让按钮代码工作？

<input type="button" value="btn">

Answer 1

您可以使用：

$('input[type="button"]').on('click',function (e) {

而不是：

$('a[href^="#"]').on('click',function (e) {

Answer 2

您可以这样使用：

$('input[type="button"][value="btn"]').on('click',function (e) {

如果你需要将它们分开昏迷：

$('a[href^="#"], input[type="button"][value="btn"]').on('click',function (e) {

但我强烈建议为他们使用一个公共类，并像这样访问：

$('.common_class').on('click',function (e) {

Answer 3

旧样式也可以起作用：

<input type="button" value="btn" onclick="$('a[href^=\"#\"]').trigger('click')">

但你应该避免那种风格（内联事件）

按钮单击时平滑滚动

3 个答案: