动态水平滚动器

Question

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

https://codepen.io/mikayp-the-styleful/pen/eYYMRXp

担忧是两件事。一种是CSS。看起来元素没有基于其变换而移动：当我单击“关于”按钮时，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";

};