Better Scroll-To Anchor Links

abstract-better-scroll-to.js

$(document).ready(function(){
  $(".anchorLink").click(function(e) {
    e.preventDefault();

    anchorScroll( $(this), $($(this).attr("href")), 100 );
  });
});

function anchorScroll(this_obj, that_obj, base_speed) {
  var this_offset = this_obj.offset();
  var that_offset = that_obj.offset();
  var offset_diff = Math.abs(that_offset.top - this_offset.top);

  var speed       = (offset_diff * base_speed) / 1000;

  $("html,body").animate({
    scrollTop: that_offset.top
  }, speed);
}

better-scroll-to-easing.js

$("html,body").animate({
  scrollTop: that_offset.top
}, {
  duration: speed,
  easing: "easeInOutSine"
});

better-scroll-to.js

$(".anchorLink").click(function(e){
  e.preventDefault();

  var this_offset = $(this).offset();
  var that_id     = $(this).attr("href");
  var that_offset = $(that_id).offset();
  var offset_diff = Math.abs(that_offset.top - this_offset.top);

  var base_speed  = 100; // Time in ms per 1,000 pixels
  var speed       = (offset_diff * base_speed) / 1000;
  
  $("html,body").animate({
    scrollTop: that_offset.top
  }, speed);
});

scroll-to.html

<a id="#top"></a>
...
<a href="#top" class="anchorLink">Back to Top</a>

traditional-scroll-to.js

$(document).ready(function(){
  $(".anchorLink").click(function(e){
    e.preventDefault();

    var id     = $(this).attr("href");
    var offset = $(id).offset();

    $("html, body").animate({
      scrollTop: offset.top
    }, 100);
  });
});