javascript - 停止滚动条增长

Question

我有一个页面可以水平滚动以转到其他页面(有点像幻灯片放映)，但我这样做的方式是，当您单击导航栏的按钮时，我的滚动条会变小变大。
我希望滚动条从页面宽度开始。

$(document).ready(function () {
    article.style.left = "-1000px";
        $('button').click(function () {
            $('button.current').removeClass('current');
            $(this).addClass('current');
        });
        $('#slide1').click(function () {
            article.style.left = "0";
        });
        $('#slide2').click(function () {
            article.style.left = "-500px";
        });
        $('#slide3').click(function () {
            article.style.left = "-1000px";
        });
        $('#slide4').click(function () {
            article.style.left = "-1500px";
        });
        $('#slide5').click(function () {
            article.style.left = "-2000px";
        });
 });

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html{
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
    overflow-y: hidden;
}

header {
    width: 100%;
    position: fixed;
    z-index: 10;
    background: #ffe7d9;
}

nav{
    width: 500px;
}

nav button{
    width: 18%;
    box-sizing: border-box;
    display: inline;
    list-style-type: none;
    cursor: pointer;
}

article {
    width: 2500px;
    position: absolute;
    transition: 1s ease;
}

.page{
    width: 490px;
    height: 500px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <nav id="menu">
         <ul>
            <button id="slide1"><li>slide1</li></button>
            <button id="slide2"><li>slide2</li></button>
            <button id="slide3"><li>slide3(start)</li></button>
            <button id="slide4"><li>slide4</li></button>
            <button id="slide5"><li>slide5</li></button>
         </ul>
    </nav>
</header>
<article id='article'>
<div class='page' style='background-color: green;'></div>
<div class='page' style='background-color: red;'></div>
<div class='page' style='background-color: yellow;'></div>
<div class='page' style='background-color: black;'></div>
<div class='page' style='background-color: blue;'></div>
</article>

如果您单击按钮(slide 1、slide2、slide3、slide4、 slide5) 你会看到滚动条自己延伸

Answer 1

$(document).ready(function () {
        $('html,body').animate({
            scrollLeft: $("#slide_3").offset().left
          }, 0);
          
        $("nav a").click(function(event){
            $("nav a").removeClass("selected");
            var clickedId = event.target.id;            
            var scrollTo = $("#slide_"+clickedId);
            $(this).addClass("selected");
           $('html,body').animate({
            scrollLeft: scrollTo.offset().left
          }, 1000);
        });
    
 });

* {
    border: 0;
    margin: 0;
    padding: 0;
}

html{
    position: relative;
    min-height: 100%;
}

body {
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    margin: 0 0 30px;
    overflow-y: hidden;
}

header {
    width: 100%;
    position: fixed;
    z-index: 10;
    background: #ffe7d9;
}

nav{
    width: 500px;
}

nav a{
    width: 18%;
    box-sizing: border-box;
    display: inline;
    list-style-type: none;
    cursor: pointer;
}
li{    display: inline;}
.selected{font-weight:bold;}
article {
    width: 2500px;
    position: absolute;
    transition: 1s ease;
}

.page{
    width: 450px;
    height: 500px;
    display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
    <nav id="menu">
         <ul>
            <li><a  id="1">slide1</a></li>
            <li><a  id="2">slide2</a></li>
            <li><a  id="3" class="selected">slide3</a></li>
            <li><a  id="4">slide4</a></li>
            <li><a  id="5">slide5</a></li>           
         </ul>
    </nav>
</header>
<article id='article'>
<div class='page' id="slide_1" style='background-color: green;'></div>
<div class='page' id="slide_2"  style='background-color: red;'></div>
<div class='page' id="slide_3"  style='background-color: yellow;'></div>
<div class='page' id="slide_4"  style='background-color: black;'></div>
<div class='page' id="slide_5"  style='background-color: blue;'></div>
</article>