Question

所以我试图顺利地跳到一排列中的点。您在视图中看到的内容一次只会是一些列，其余的则隐藏起来。我已经构建了静态列和一个可以滚动的容器，以及一个用于跳转到相应列的锚点列表，但是我无法让滚动条适用于我的生活。任何帮助将非常感谢。

这是我的HTML：

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title>jQuery scrollTo Demo</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/boxscore-test.css">
  </head>
  <body>
    <section id="slider">
      <ul id="navigation">
        <li><a href="#col1">1</a></li>
        <li><a href="#col2">2</a></li>
        <li><a href="#col3">3</a></li>
        <li><a href="#col4">4</a></li>
        <li><a href="#col5">5</a></li>
        <li><a href="#col6">6</a></li>
        <li><a href="#col7">7</a></li>
        <li><a href="#col8">8</a></li>
        <li><a href="#col9">9</a></li>
      </ul>
    </section>
    <section class="boxscore-med">
      <div class="boxscore">
        <div class="container">
          <div id="col1" class="column">1
              <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col2" class="column">2
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col3" class="column">3
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col4" class="column">4
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col5" class="column">5
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col6" class="column">6
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col7" class="column">7
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col8" class="column">8
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
          <div id="col9" class="column">9
            <ul class="column-box">
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
                <li class="box"></li>
               </ul>
          </div>
        </div>
      </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js" type="text/javascript"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
    <script src="boxscore-test.js" type="text/javascript"></script>
  </body>
</html>

这里是CSS：

.boxscore-med {
height: 550px;
width: 350px;
background: yellow;
padding: 12.5px;
}

.boxscore {
height:500px;
width: 300px;
/*  overflow-x: hidden;*/
background: Grey;
display: inline-block;
}

.container {
height: 100%;
width: 300%;
background: Grey;
}

.column {
width: 8%;
height: 100%;
background: red;
margin: 0 1%;
display: inline-block;
}

和我的.js：

$('#navigation').localScroll({
       target: .boxscore,
       duration: 2000,
       easing: swing,
    });
});

谢谢！

使用jQuery scrollTo浏览溢出内容

0 个答案: