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!