CODE
<html>
<head>
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// Script for scroll
$(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
$(".parent").scrolling = false;
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
$(".parent").scrolling = false;
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=3px" : "+=3px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}
});
//script for sub menu show and hide
$(function(){
$(function () {
$(".MenuFunctions").hide();
$(".parent").click(function (e) {
e.preventDefault();
if (!$(e.target).closest("ul").is(".MenuFunctions")) {
$(".MenuFunctions", this).toggle();
}
});
});
});
//]]>
</script>
<style>
#content {
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="LeftContent">
<div id="wrapper">
<div align="left"><a class="NavButtons" id="scrollUp" href="#">Scroll Up</a>
<div id="content">
<ul>
<li class="parent"> <a href="#">Category One</a>
<ul class='MenuFunctions'>
<li class='MenuButton'><a href="#">Item1</a></li>
<li class='MenuButton'><a href="#">Item2</a></li>
<li class='MenuButton'><a href="#">Item3</a></li>
<li class='MenuButton'><a href="#">Item4</a></li>
<li class='MenuButton'><a href="#">Item5</a></li>
<li class='MenuButton'><a href="#">Item6</a></li>
<li class='MenuButton'><a href="#">Item7</a></li>
<li class='MenuButton'><a href="#">Item8</a></li>
<li class='MenuButton'><a href="#">Item9</a></li>
<li class='MenuButton'><a href="#">Item10</a></li>
<li class='MenuButton'><a href="#">Item11</a></li>
<li class='MenuButton'><a href="#">Item12</a></li>
<li class='MenuButton'><a href="#">Item13</a></li>
<li class='MenuButton'><a href="#">Item14</a></li>
<li class='MenuButton'><a href="#">Item15</a></li>
<li class='MenuButton'><a href="#">Item16</a></li>
<li class='MenuButton'><a href="#">Item17</a></li>
<li class='MenuButton'><a href="#">Item18</a></li>
<li class='MenuButton'><a href="#">Item19</a></li>
<li class='MenuButton'><a href="#">Item20</a></li>
<li class='MenuButton'><a href="#">Item21</a></li>
<li class='MenuButton'><a href="#">Item22</a></li>
<li class='MenuButton'><a href="#">Item23</a></li>
<li class='MenuButton'><a href="#">Item24</a></li>
<li class='MenuButton'><a href="#">Item25</a></li>
<li class='MenuButton'><a href="#">Item26</a></li>
<li class='MenuButton'><a href="#">Item27</a></li>
<li class='MenuButton'><a href="#">Item28</a></li>
<li class='MenuButton'><a href="#">Item29</a></li>
<li class='MenuButton'><a href="#">Item30</a></li>
<li class='MenuButton'><a href="#">Item31</a></li>
<li class='MenuButton'><a href="#">Item32</a></li>
<li class='MenuButton'><a href="#">Item33</a></li>
<li class='MenuButton'><a href="#">Item34</a></li>
<li class='MenuButton'><a href="#">Item35</a></li>
<li class='MenuButton'><a href="#">Item36</a></li>
<li class='MenuButton'><a href="#">Item37</a></li>
<li class='MenuButton'><a href="#">Item38</a></li>
<li class='MenuButton'><a href="#">Item39</a></li>
<li class='MenuButton'><a href="#">Item40</a></li>
<li class='MenuButton'><a href="#">Item41</a></li>
<li class='MenuButton'><a href="#">Item42</a></li>
<li class='MenuButton'><a href="#">Item43</a></li>
<li class='MenuButton'><a href="#">Item44</a></li>
<li class='MenuButton'><a href="#">Item45</a></li>
<li class='MenuButton'><a href="#">Item46</a></li>
<li class='MenuButton'><a href="#">Item47</a></li>
<li class='MenuButton'><a href="#">Item48</a></li>
<li class='MenuButton'><a href="#">Item49</a></li>
<li class='MenuButton'><a href="#">Item50</a></li>
</ul>
</li>
<li class="parent"> <a href="#">Category Two</a>
<ul class='MenuFunctions'>
<li class='MenuButton'><a href="#">Item1</a></li>
<li class='MenuButton'><a href="#">Item2</a></li>
<li class='MenuButton'><a href="#">Item3</a></li>
<li class='MenuButton'><a href="#">Item4</a></li>
<li class='MenuButton'><a href="#">Item5</a></li>
<li class='MenuButton'><a href="#">Item6</a></li>
<li class='MenuButton'><a href="#">Item7</a></li>
<li class='MenuButton'><a href="#">Item8</a></li>
<li class='MenuButton'><a href="#">Item9</a></li>
<li class='MenuButton'><a href="#">Item10</a></li>
<li class='MenuButton'><a href="#">Item11</a></li>
<li class='MenuButton'><a href="#">Item12</a></li>
<li class='MenuButton'><a href="#">Item13</a></li>
<li class='MenuButton'><a href="#">Item14</a></li>
<li class='MenuButton'><a href="#">Item15</a></li>
<li class='MenuButton'><a href="#">Item16</a></li>
<li class='MenuButton'><a href="#">Item17</a></li>
<li class='MenuButton'><a href="#">Item18</a></li>
<li class='MenuButton'><a href="#">Item19</a></li>
<li class='MenuButton'><a href="#">Item20</a></li>
<li class='MenuButton'><a href="#">Item21</a></li>
<li class='MenuButton'><a href="#">Item22</a></li>
<li class='MenuButton'><a href="#">Item23</a></li>
<li class='MenuButton'><a href="#">Item24</a></li>
<li class='MenuButton'><a href="#">Item25</a></li>
<li class='MenuButton'><a href="#">Item26</a></li>
<li class='MenuButton'><a href="#">Item27</a></li>
<li class='MenuButton'><a href="#">Item28</a></li>
<li class='MenuButton'><a href="#">Item29</a></li>
<li class='MenuButton'><a href="#">Item30</a></li>
<li class='MenuButton'><a href="#">Item31</a></li>
<li class='MenuButton'><a href="#">Item32</a></li>
<li class='MenuButton'><a href="#">Item33</a></li>
<li class='MenuButton'><a href="#">Item34</a></li>
<li class='MenuButton'><a href="#">Item35</a></li>
<li class='MenuButton'><a href="#">Item36</a></li>
<li class='MenuButton'><a href="#">Item37</a></li>
<li class='MenuButton'><a href="#">Item38</a></li>
<li class='MenuButton'><a href="#">Item39</a></li>
<li class='MenuButton'><a href="#">Item40</a></li>
<li class='MenuButton'><a href="#">Item41</a></li>
<li class='MenuButton'><a href="#">Item42</a></li>
<li class='MenuButton'><a href="#">Item43</a></li>
<li class='MenuButton'><a href="#">Item44</a></li>
<li class='MenuButton'><a href="#">Item45</a></li>
<li class='MenuButton'><a href="#">Item46</a></li>
<li class='MenuButton'><a href="#">Item47</a></li>
<li class='MenuButton'><a href="#">Item48</a></li>
<li class='MenuButton'><a href="#">Item49</a></li>
<li class='MenuButton'><a href="#">Item50</a></li>
</ul>
</li>
</ul>
</div>
<a class="NavButtons" id="scrollDown" href="#">Scroll Down</a> </div>
</div>
</div>
</div>
</body>
</html>
<head>
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
// Script for scroll
$(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "-=" + step + "px"
});
}).bind("mouseover", function(event) {
$(".parent").scrolling = false;
scrolling = true;
scrollContent("up");
}).bind("mouseout", function(event) {
scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
event.preventDefault();
$("#content").animate({
scrollTop: "+=" + step + "px"
});
}).bind("mouseover", function(event) {
$(".parent").scrolling = false;
scrolling = true;
scrollContent("down");
}).bind("mouseout", function(event) {
scrolling = false;
});
function scrollContent(direction) {
var amount = (direction === "up" ? "-=3px" : "+=3px");
$("#content").animate({
scrollTop: amount
}, 1, function() {
if (scrolling) {
scrollContent(direction);
}
});
}
});
//script for sub menu show and hide
$(function(){
$(function () {
$(".MenuFunctions").hide();
$(".parent").click(function (e) {
e.preventDefault();
if (!$(e.target).closest("ul").is(".MenuFunctions")) {
$(".MenuFunctions", this).toggle();
}
});
});
});
//]]>
</script>
<style>
#content {
height:200px;
overflow:hidden;
}
</style>
</head>
<body>
<div id="LeftContent">
<div id="wrapper">
<div align="left"><a class="NavButtons" id="scrollUp" href="#">Scroll Up</a>
<div id="content">
<ul>
<li class="parent"> <a href="#">Category One</a>
<ul class='MenuFunctions'>
<li class='MenuButton'><a href="#">Item1</a></li>
<li class='MenuButton'><a href="#">Item2</a></li>
<li class='MenuButton'><a href="#">Item3</a></li>
<li class='MenuButton'><a href="#">Item4</a></li>
<li class='MenuButton'><a href="#">Item5</a></li>
<li class='MenuButton'><a href="#">Item6</a></li>
<li class='MenuButton'><a href="#">Item7</a></li>
<li class='MenuButton'><a href="#">Item8</a></li>
<li class='MenuButton'><a href="#">Item9</a></li>
<li class='MenuButton'><a href="#">Item10</a></li>
<li class='MenuButton'><a href="#">Item11</a></li>
<li class='MenuButton'><a href="#">Item12</a></li>
<li class='MenuButton'><a href="#">Item13</a></li>
<li class='MenuButton'><a href="#">Item14</a></li>
<li class='MenuButton'><a href="#">Item15</a></li>
<li class='MenuButton'><a href="#">Item16</a></li>
<li class='MenuButton'><a href="#">Item17</a></li>
<li class='MenuButton'><a href="#">Item18</a></li>
<li class='MenuButton'><a href="#">Item19</a></li>
<li class='MenuButton'><a href="#">Item20</a></li>
<li class='MenuButton'><a href="#">Item21</a></li>
<li class='MenuButton'><a href="#">Item22</a></li>
<li class='MenuButton'><a href="#">Item23</a></li>
<li class='MenuButton'><a href="#">Item24</a></li>
<li class='MenuButton'><a href="#">Item25</a></li>
<li class='MenuButton'><a href="#">Item26</a></li>
<li class='MenuButton'><a href="#">Item27</a></li>
<li class='MenuButton'><a href="#">Item28</a></li>
<li class='MenuButton'><a href="#">Item29</a></li>
<li class='MenuButton'><a href="#">Item30</a></li>
<li class='MenuButton'><a href="#">Item31</a></li>
<li class='MenuButton'><a href="#">Item32</a></li>
<li class='MenuButton'><a href="#">Item33</a></li>
<li class='MenuButton'><a href="#">Item34</a></li>
<li class='MenuButton'><a href="#">Item35</a></li>
<li class='MenuButton'><a href="#">Item36</a></li>
<li class='MenuButton'><a href="#">Item37</a></li>
<li class='MenuButton'><a href="#">Item38</a></li>
<li class='MenuButton'><a href="#">Item39</a></li>
<li class='MenuButton'><a href="#">Item40</a></li>
<li class='MenuButton'><a href="#">Item41</a></li>
<li class='MenuButton'><a href="#">Item42</a></li>
<li class='MenuButton'><a href="#">Item43</a></li>
<li class='MenuButton'><a href="#">Item44</a></li>
<li class='MenuButton'><a href="#">Item45</a></li>
<li class='MenuButton'><a href="#">Item46</a></li>
<li class='MenuButton'><a href="#">Item47</a></li>
<li class='MenuButton'><a href="#">Item48</a></li>
<li class='MenuButton'><a href="#">Item49</a></li>
<li class='MenuButton'><a href="#">Item50</a></li>
</ul>
</li>
<li class="parent"> <a href="#">Category Two</a>
<ul class='MenuFunctions'>
<li class='MenuButton'><a href="#">Item1</a></li>
<li class='MenuButton'><a href="#">Item2</a></li>
<li class='MenuButton'><a href="#">Item3</a></li>
<li class='MenuButton'><a href="#">Item4</a></li>
<li class='MenuButton'><a href="#">Item5</a></li>
<li class='MenuButton'><a href="#">Item6</a></li>
<li class='MenuButton'><a href="#">Item7</a></li>
<li class='MenuButton'><a href="#">Item8</a></li>
<li class='MenuButton'><a href="#">Item9</a></li>
<li class='MenuButton'><a href="#">Item10</a></li>
<li class='MenuButton'><a href="#">Item11</a></li>
<li class='MenuButton'><a href="#">Item12</a></li>
<li class='MenuButton'><a href="#">Item13</a></li>
<li class='MenuButton'><a href="#">Item14</a></li>
<li class='MenuButton'><a href="#">Item15</a></li>
<li class='MenuButton'><a href="#">Item16</a></li>
<li class='MenuButton'><a href="#">Item17</a></li>
<li class='MenuButton'><a href="#">Item18</a></li>
<li class='MenuButton'><a href="#">Item19</a></li>
<li class='MenuButton'><a href="#">Item20</a></li>
<li class='MenuButton'><a href="#">Item21</a></li>
<li class='MenuButton'><a href="#">Item22</a></li>
<li class='MenuButton'><a href="#">Item23</a></li>
<li class='MenuButton'><a href="#">Item24</a></li>
<li class='MenuButton'><a href="#">Item25</a></li>
<li class='MenuButton'><a href="#">Item26</a></li>
<li class='MenuButton'><a href="#">Item27</a></li>
<li class='MenuButton'><a href="#">Item28</a></li>
<li class='MenuButton'><a href="#">Item29</a></li>
<li class='MenuButton'><a href="#">Item30</a></li>
<li class='MenuButton'><a href="#">Item31</a></li>
<li class='MenuButton'><a href="#">Item32</a></li>
<li class='MenuButton'><a href="#">Item33</a></li>
<li class='MenuButton'><a href="#">Item34</a></li>
<li class='MenuButton'><a href="#">Item35</a></li>
<li class='MenuButton'><a href="#">Item36</a></li>
<li class='MenuButton'><a href="#">Item37</a></li>
<li class='MenuButton'><a href="#">Item38</a></li>
<li class='MenuButton'><a href="#">Item39</a></li>
<li class='MenuButton'><a href="#">Item40</a></li>
<li class='MenuButton'><a href="#">Item41</a></li>
<li class='MenuButton'><a href="#">Item42</a></li>
<li class='MenuButton'><a href="#">Item43</a></li>
<li class='MenuButton'><a href="#">Item44</a></li>
<li class='MenuButton'><a href="#">Item45</a></li>
<li class='MenuButton'><a href="#">Item46</a></li>
<li class='MenuButton'><a href="#">Item47</a></li>
<li class='MenuButton'><a href="#">Item48</a></li>
<li class='MenuButton'><a href="#">Item49</a></li>
<li class='MenuButton'><a href="#">Item50</a></li>
</ul>
</li>
</ul>
</div>
<a class="NavButtons" id="scrollDown" href="#">Scroll Down</a> </div>
</div>
</div>
</div>
</body>
</html>