Smooth scrolling unit without using the attribute a [href ^ = "#"]

Question

How to implement the transition when you click on the block with the class

 <div class="btn">button-scroll </div>

Do not use aa [href ^ = "#"] <a href="#one">One</a>

<aside>

    <ul>
        <li><a href="#one">One</a></li>
        <li><a href="#two">Two</a></li>
        <li><a href="#three">Three</a></li>
        <li><a href="#four">Four</a></li>
        <li><a href="#five">Five</a></li>
        <li><a href="#six">Six</a></li>
    </ul>
</aside>

$(document).ready(function(){
// = Вешаем событие прокрутки к нужному месту
    //   на все ссылки якорь которых начинается на #
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
        e.preventDefault();

        var target = this.hash,
        $target = $(target);

        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-($('ul').height()+ 100)  
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });

});

#main h2 {
    margin-top:400px;
}
ul{
    position:fixed;
    top: 0px;
}
ul li{
    display:inline-block;
}

Answer 1

Hi you can try with following Instead of <div class="btn">button-scroll </div> add attribute 'target'like <div class="btn" target="targetDivId">button-scroll </div>

and in JavaScript

$(document).ready(function(){
    $('.btn').bind('click',function (e) {
        e.preventDefault();
        var target = $(this).attr('target'),
        $target = $(target);
        $('html, body').stop().animate({
            'scrollTop': $target.offset().top-(100)  
        }, 900, 'swing');
    });
});