Question

尊敬的各位同事，

我正在尝试为我正在构建的网站找到解决方案。该网站以文本形式提供，我们正在尝试向用户提供3个操作。向上滚动，向下滚动并转到顶部。

此外，我想在一个高度相同的条形图上表示整个页面高度，无论内容有多高。换句话说，内容的高度将始终由80px条表示，条形按钮也将始终具有10px高度。

对于第一个问题我正在使用window.scrollBy，但它似乎对我不起作用。对于第二个问题，我还没有真正的意识形态，我希望有任何帮助，让我走向正确的方向。

这是我当前的代码，也是我正在附上我的Jsfiddle。

HTML

<div id="header">
    <p>header</p>
</div>
<div id="docnav">
    <button onclick="scrollUp()">Up</button>
    <div id="sidescroll">
        <div id="sidescrollbtn"></div>
    </div>
    <button onclick="scrollDown()">Down</button><br><br>
    <button onclick="scrollTop()">Go to Top</button><br><br>
</div>
<div id="maincontent">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
</div>

<div id="footer">
    <p>Footer</p>
</div>

CSS

#header{width:100%;background:red;height:100px;}
#docnav{position:fixed;right:0,width:10%;background:red;right:8px;text-align:center;}
#sidescroll{height:80px;width:10px;background:grey;border:1px solid black;margin:0 auto;}
#sidescrollbtn{height:10px;width:10px;background:red;margin-top:10px;}
#maincontent{border:1px solid black;background-color:lightblue;height:1000px;width:500px;margin:0 0 100px 20px;}
#footer{height:100px;width:100%;background:red;position:fixed;bottom:0;}

JAVASCRIPT

function scrollUp()
{
   window.scrollBy(0,20);
}

function scrollDown()
{
   window.scrollBy(0,-20);
}

function scrollTop()
{
   window.scrollTo(0,0);
}

http://jsfiddle.net/vinicius5581/bruetck6/3/

带JavaScript的垂直滚动按钮

0 个答案: