Javascript 动态水平滚动条

尝试使此水平侧滚动侧根据按钮单击移动到不同元素

关注的是两件事。一个是CSS。当我单击“关于”按钮时，元素似乎没有根据其transform:translateX移动。我是不是遗漏了什么

更大的问题是JS。我相信这个代码真的很低效。是否有一种方法可以重新构造它，这样我就不必在每次单击按钮时都执行一个功能，而是执行一个只将屏幕移动到特定部分的功能？我见过类似的传统垂直网站，但不是水平的

function toAbout(){
    var welcome = document.querySelector('.welcome');
    var about = document.querySelector('.about');
    var professional = document.querySelector('.professional');
    var funStuff = document.querySelector('.fun-stuff');
    var blog = document.querySelector('.blog');
    var contact = document.querySelector('.contact');


    about.className += " slide-zero";
    professional.className += " slide-plus-100";
    welcome.className += " slide-plus-200";
    funStuff.className += " slide-plus-300";
    blog.className += " slide-plus-400";
    contact.className += " slide-plus-500";

};