How to scroll with div buttons instead of scroll bar

Question

I want to know how to turn my two arrow buttons into scrolling buttons so you can scroll through the div container. IF you look at the demo below you will notice a window appears when you press the black square. One the window opens there are to black rectangle which indicate my scrolling buttons the the gray squares are the contents. I would like to remove the scroll bar but still have scrolling function which I can control with the two black rectangle buttons i made. I would also like the bottom black rectangle to be where the horizontal scroll bar is normally at and I would not like that button to fall into the scroll because that would void the whole purpose.

I would also like top button to disappear when the container is all the way at the top and the bottom button to disappear when the container is all the way at the bottom.

There is a website that I got this idea from so you can go look at it to see what I am talking about. It will be listed below! If you click the little map button on the left another window will open up with circle icons! You may have to shrink your browser for the scroll feature to appear but you will notice a button at the bottom which scrolls down and once you go all the way down it disappear and once you scroll down the up button appears to scroll up then goes away when you get to the top again.

Here is the example website! http://intothearctic.gp/en/

Here is some code!

HTML

<div id="sidemenu">
    <div id="regionsContainer">
        <div id="regionsUnitedStates" class="not-open regionsButton">
        <div id="regionsUnitedStatesTooltip"></div>
        </div>
    </div>
    <div id="regionsUnitedStatesChooseState" class="regionsContent">
        <div id="chooseStateUnitedStatesColumnOne">
                <div id="chooseStateUnitedStatesScrollUp"></div>
                    <div id="chooseStateAlabama1" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama2" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama3" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama4" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama5" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama6" class="not-open regionsButton"></div>
            <div id="chooseStateAlabama7" class="not-open regionsButton"></div>
                <div id="chooseStateUnitedStatesScrollDown"></div>
        </div>
    </div>
</div>

CSS

#sidemenu {
    width: 60px;
    height:100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    position: absolute;
    left: -60px;
    transition: left ease-in-out 0.5s;
    top: 0;
}
#sidemenu.show {
    left: 0;
}
#regionsContainer {
    width: 60px;
    height: 100%;
    min-width: 60px;
    max-width: 60px;
    background-color: #383D3F;
    position: absolute;
    top:25%;
}
#regionsUnitedStates {
    width: 60px;
    height: 60px;
    background-color:#111111;
}
#regionsUnitedStatesTooltip {
    opacity:0;
    background-color:#000;
    height:60px;
    width:180px;
    left:100px;
    position:absolute;
    transition:all ease-in-out 0.25s;
    top:0;
    visibility:hidden;
}
#regionsUnitedStates.not-open:hover #regionsUnitedStatesTooltip{
    left: 60px;
    opacity:1;
    visibility:visible;
    }
#regionsUnitedStates:hover {
    background-position:bottom;
}
#regionsUnitedStatesChooseState{
    position:absolute;
    transition:all ease-in-out 0.25s;
    left: -150px;
    width: 150px;
    height: 100%;
    background: #505759;
    top:0;
    z-index:-1;
    overflow:auto;
}
#regionsUnitedStatesChooseState.show {
    left: 60px;
    z-index:-1;
}
#chooseStateUnitedStatesScrollUp {
    width:150px;
    height:40px;
    background-color:#111111;
    top:0%;
}
#chooseStateUnitedStatesScrollUp:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseStateUnitedStatesScrollDown {
    width:150px;
    height:40px;
    background-color:#111111;
    bottom:100%;
}
#chooseStateUnitedStatesScrollDown:hover {
    background-position:bottom; 
    cursor:pointer;
}
#chooseStateUnitedStatesColumnOne {
    width:100px;
    height:100%;
    float:left; 
    top:0%;
}
#chooseStateAlabama1 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama2 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama3 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama4 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama5 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
}
#chooseStateAlabama6 {
    width: 100px;
    height:100px;
    background-color:#888888;
    margin-left:25px;
    margin-top:10px;
    margin-bottom:10px;
}

JAVASCRIPT

$(function(slideSidemenu) {
    setTimeout(function() { $("#sidemenu").addClass("show") }, 500);
});

var $regionsContent = $('.regionsContent'), 
$regionsButton = $('.regionsButton').click(function(){
    var $button = $(this).removeClass('not-open');
    var buttonIndex = $regionsButton.index($button);
    $regionsContent.removeClass('show');
setTimeout(function() {
    $regionsContent.eq(buttonIndex).addClass('show');
    }, 150);
    $regionsButton.not($button).addClass('not-open');
});

$('#chooseStateAlabama').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlabamaChooseCity").addClass('show');
    }, 300);
});

$('#chooseStateAlaska').click(function() {
   $(this).parents('.regionsContent').removeClass('show');
    setTimeout(function() {       
       $("#regionsUnitedStatesAlaskaChooseCity").addClass('show');
    }, 300);
});

DEMO

JSFIDDLE

score 0 · Answer 1 · edited May 23 '17 at 11:57

This doesn't make the scrollbars disappear, nor does it hide buttons other than the example button scrolling out of view when moving down to paragraph four (so this isn't everything you need), but for a basic "click a div to scroll with jQuery" example, using code from this answer:

window.onload = init;
function init() {
  $("#myButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#foo4").offset().top
    }, 2000);
  });
}

Working example.

How to scroll with div buttons instead of scroll bar

1 Answers1