0

So I'm trying to smoothly jump to points in a row of columns. What you can see in the view will only be a few of the columns at a time, leaving the rest hidden. I've built static columns and a container that I can scroll through, and a list of anchors that work for jumping to their corresponding column, but I can't get the scroll to work for the life of me. Any help would be great appreciated.

Here's my 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>

Here's the 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;
}

and my .js:

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

Thanks!

bwstud
  • 23
  • 7
  • http://stackoverflow.com/questions/6677035/jquery-scroll-to-element?rq=1 – Ramy Nasr May 27 '14 at 18:11
  • Thanks for the link but I'm trying to scroll along the X axis, not vertically, and within a frame in the view, not the whole window. – bwstud May 27 '14 at 18:47

0 Answers0