如何使用 div 按钮而不是滚动条滚动

Question

我想知道如何将我的两个箭头按钮变成滚动按钮，以便您可以滚动浏览 div 容器。如果您查看下面的演示，您会注意到当您按下黑色方块时会出现一个窗口。打开的窗口之一是黑色矩形，表示我的滚动按钮，灰色方块是内容。我想删除滚动条，但仍然有滚动功能，我可以用我制作的两个黑色矩形按钮来控制它。我还希望底部的黑色矩形位于水平滚动条通常所在的位置，并且我不希望该按钮落入滚动条，因为这会使整个目的无效。

我还希望当容器一直在顶部时顶部按钮消失，而当容器一直在底部时底部按钮消失。

我从一个网站上得到了这个想法，所以你可以去看看我在说什么。下面会一一列举！如果您单击左侧的小地图按钮，则会打开另一个带有圆形图标的窗口！您可能需要缩小浏览器才能显示滚动功能，但您会注意到底部有一个向下滚动的按钮，一旦您一直向下滚动，它就会消失，一旦您向下滚动，向上按钮就会向上滚动然后消失当你再次登顶时。

这是示例网站！ http://intothearctic.gp/en/

这是一些代码！

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);
});

演示

JSFIDDLE

Answer 1

这不会使滚动条消失，也不会隐藏除示例按钮之外的按钮，当向下移动到第四段时（因此这不是您需要的全部），但是对于基本的“单击使用 jQuery 滚动的 div”示例，使用来自 this answer 的代码：

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

Working example.