Question

As the title says, I think this code can be simplified in less lines. Could someone help me with this?

    $('a[href=#over]').click(function(){
    $('html, body').animate({
        scrollTop: $("#over").offset().top - 100
    }, 2000);
});

$('a[href=#diensten]').click(function(){
    $('html, body').animate({
        scrollTop: $("#diensten").offset().top - 100
    }, 2000);
});

$('a[href=#portfolio]').click(function(){
    $('html, body').animate({
        scrollTop: $("#portfolio").offset().top - 100
    }, 2000);
});

$('a[href=#contact]').click(function(){
  $("html, body").animate({ scrollTop: $(document).height() }, 2000);
});

$('a[href=#top]').click(function(){
    $('html, body').animate({scrollTop:0}, 2000);
    return false;
});

I was thinking myself off an if/elseif statement, but im kinda stuck in there. So could you please have an look?

Answer 1

You can use the href attribute of anchors for selecting the element by IDs.

$('a').click(function(){
    var id = this.href;
    $('html, body').animate({
        scrollTop: $(id).offset().top - 100
    }, 2000);
});

---

$('a').click(function(e) {
    e.preventDefault();
    var id = this.href;
    var scroll = '';
    if (id === '#contact') {
       scroll =  $(document).height();
    } else if (id === '#top') {
       scroll = 0;
    } else {
       scroll = $(id).offset().top - 100;
    }
    $('html, body').animate({
           scrollTop: scroll
    }, 2000)
});