Animated scrolling when intra-page links are clicked

Question

I have the following code to get the ID of a <a href="#ID"> </ a> and go to their respective div <div id="" />:

$('a[href=#certificados]').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#certificados').offset().top }, 1000);
});

$('a[href=#team]').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#team').offset().top }, 1000);
});

$('a[href=#house]').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#house').offset().top }, 1000);
});

$('a[href=#contact]').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $('#contact').offset().top }, 1000);
});

How could I optimize the code?

Answer 1

Get the "respective" div in a more general way from the link's href attribute:

$('a[href=#certificados], a[href=#team], a[href=#house], a[href=#contact]').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $(this.hash).offset().top }, 1000);
    // this.hash would be equivalent to $(this).attr("href") in your case
});

Probably you also can use a much better selector now - maybe selecting those links by a common class.

Answer 2

If you want to make the code DRYer, you can do

['#certificados', '#team', '#house', '#contact'].forEach(function(anchor){
    $("a[href="+anchor+"]").click(function(e){
        e.preventDefault();
        $("html, body").animate({ scrollTop: $(anchor).offset().top }, 1000);
    });
})

If all internal links are to be handled this way, do

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

Answer 3

You can make an extension, that will let you specify what link scrolls to where, without creating a hard dependancy between the href attribute and the target identity:

$.fn.scrollTo = function(target){
  return this.click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $(target).offset().top }, 1000);
  });
};

$('a[href=#certificados]').scrollTo('#certificados');
$('a[href=#team]').scrollTo('#team');
$('a[href=#house]').scrollTo('#house');
$('a[href=#contact]').scrollTo('#contact');

Answer 4

Add a class to the anchors, like scrollable.

$('.scrollable').click(function(e){
    e.preventDefault();
    $("html, body").animate({ scrollTop: $(this.hash).offset().top }, 1000);
});

Each is called under the hood, no crazy functions, just KISS.