Html 使用skrollr和skrollr菜单，1）如何让我的站点平滑滚动到我的标签？2） 如何使我的站点仅水平滚动？

这是我的小提琴，我不能去工作：

关于我们
课程
画廊
住宿
推荐书
联系我们
/*由@geoyws编写的代码*/
身体{
高度：100vh；
}
.主货柜{
位置：绝对位置；
顶部：0px；
左：0px；
}
.固定导航集装箱{
位置：固定；
填充：10px 0px 50px 0px；
高度：100vh；
宽度：280px；
利润率：-15px 0px 0px-15px；
背景：rgba（255，255，255，0.99）；
盒影：-5px 5px 15px 5px灰色；
文本对齐：右对齐；
字体大小：正常；
字体系列：Helvetica、Arial、无衬线字体；
z指数：999999；
}
#标志{
宽度：180px；
填充：10vh 40px 10vh 10px；
}
导航菜单{
列表样式类型：无；
保证金：0px自动0自动；
填充：0 40px 0 0px；
文本转换：大写；
}
ul.导航菜单>li{
填充：5px 5px 5px 0；
颜色：#551F7A；
}
ul.导航菜单>li>a{
边际：0像素0；
宽度：继承；
文字装饰：无；
颜色：继承；
}
ul.导航菜单>li:悬停{
颜色：白色；
背景：rgba（85,31,122,1.00）；
}
ul.导航菜单>li：激活{
颜色：白色；
背景：rgba（85,31,122,1.00）；
}
.主要内容{
利润率：50px 20px 30px 320px；
宽度：10000px；
}
.两清{
明确：两者皆有；
}
.主要内容页{
浮动：左；
右边距：20px；
高度：80vh；
最大宽度：800px；
最小宽度：400px；
溢出y：滚动；
}
#页面容器{
宽度：自动；
高度：自动；
最小高度：80vh；
背景：rgba（255、255、255、99）；
边界半径：0px；
填充：30px；
}

1） 如何让我的网站平滑滚动到我的标签？它目前正飞到那里。我使用Skrollr菜单的方式有问题吗

2） 如何使我的站点仅水平滚动？我试图得到这样的效果：

---

谢谢各位。

小提琴甚至没有Skroller。另外，您没有初始化skrollr菜单。除此之外，skrollr和skrollr菜单都不支持水平滚动。好吧，我自己设法让它工作。现在制作小提琴太麻烦了。我有时间就回来。

<div class="fixed-nav-container"> <a id="logo-a" href="#home"><img id="logo" src="files/images/enliten-logo.png"></a>

    <ul class="nav-menu">
        <li><a href="#home">Home</a>
        </li>
        <li><a href="#about-us">About Us</a>
        </li>
        <li><a href="#curriculum">Curriculum</a>
        </li>
        <li><a href="#gallery">Gallery</a>
        </li>
        <li><a href="#accommodation">Accommodation</a>
        </li>
        <li><a href="#testimonials">Testimonials</a>
        </li>
        <li><a href="#contact-us">Contact Us</a>
        </li>
        <li><a href="#forums">Forums</a>
        </li>
    </ul>
    <!-- End of .fixed-nav-container -->
</div>
<!-- Beginning of .main-container, to hold the entire site -->
<!-- Also contains the Skrollr functionality to make the site scroll horizontally -->
<div id="home" class="main-container" data-0="left:0px;" data-250="left:-500px;" data-500="left:-1000px;" data-750="left:-1500px;" data-1000="left:-2000px;" data-2000="left:-4000px;" data-3000="left:-6000px;">
    <!-- Beginning of the vertical offset function of Skrollr -->
    <div data-smooth-scrolling="on" data-0="top:0px;" data-250="top:250px;" data-500="top:500px;" data-750="top:750px;" data-1000="top:1000px;" data-2000="top:2000px;" data-3000="top:3000px;">
        <!-- Beginning of .main-content, where we will display the major contents of the site -->
        <div class="main-content">
            <div class="main-content-pages" id="about-us">About Us</div>
            <div class="main-content-pages" id="curriculum">Curriculum</div>
            <div class="main-content-pages" id="gallery">Gallery</div>
            <div class="main-content-pages" id="accommodation">Accommodation</div>
            <div class="main-content-pages" id="testimonials">Testimonials</div>
            <div class="main-content-pages" id="contact-us">Contact Us</div>
            <div class="clear-both"></div>
        </div>
    </div>
</div>

/* Code by @geoyws */
 body {
    height:100vh;
}
.main-container {
    position:absolute;
    top:0px;
    left:0px;
}
.fixed-nav-container {
    position:fixed;
    padding:10px 0px 50px 0px;
    height:100vh;
    width:280px;
    margin:-15px 0px 0px -15px;
    background:rgba(255, 255, 255, 0.99);
    box-shadow:-5px 5px 15px 5px gray;
    text-align:right;
    font-weight:normal;
    font-family:Helvetica, Arial, sans-serif;
    z-index:999999;
}
#logo {
    width:180px;
    padding:10vh 40px 10vh 10px;
}
ul.nav-menu {
    list-style-type:none;
    margin:0px auto 0 auto;
    padding:0 40px 0 0px;
    text-transform:uppercase;
}
ul.nav-menu>li {
    padding:5px 5px 5px 0;
    color:#551F7A;
}
ul.nav-menu>li>a {
    margin: 0 0 0px 0;
    width:inherit;
    text-decoration:none;
    color:inherit;
}
ul.nav-menu>li:hover {
    color:white;
    background: rgba(85, 31, 122, 1.00);
}
ul.nav-menu>li:active {
    color:white;
    background: rgba(85, 31, 122, 1.00);
}
.main-content {
    margin: 50px 20px 30px 320px;
    width:10000px;
}
.clear-both {
    clear:both;
}
.main-content-pages {
    float:left;
    margin-right:20px;
    height:80vh;
    max-width:800px;
    min-width:400px;
    overflow-y:scroll;
}
#page-container {
    width:auto;
    height:auto;
    min-height:80vh;
    background: rgba(255, 255, 255, .99);
    border-radius:0px;
    padding: 30px;
}