var $customizer = $('div.customizer');
// Calculate top position of the outer node and the step we want to scroll to
var customizerTop = $customizer.offset().top;
var stepTop = $('.tms-step[data-step=' + attr + ']').offset().top;
// Calculate pixel difference pixels between outer node and the next step
var scrollDiff = stepTop - customizerTop;
// Apply the difference to the current scroll offset
var oldScrollTop = $customizer.scrollTop();
var newScrollTop = oldScrollTop + scrollDiff;
// Smooth scroll
$customizer.animate({
scrollTop: newScrollTop
}, 500);
I couldn’t really test it with your site, but the general idea is that you calculate the difference between the offsets of the outer container and the step you want to scroll to, and then you apply that difference to the current scroll position.
Also note that it’s much safer to append var before variable names (e.g. var Y = ... is much better than Y = ... since the latter will put the variable into the global scope, which can lead to some unpredictable funkiness).