Smooth scrolling on button click

Question

I used this code:

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

and the smooth scroll work perfectly between a link and an anchor!

But how can I make following button code work for ?

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

Answer 1

You can use like this:

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

If you need both separate them by a coma:

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

---

But I would strongly recommend to use a common class for them and access like this:

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

Answer 2

You can use:

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

instead of:

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

Answer 3

The old style could work too:

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

But you should avoid that style (inline event)