Javascript / css: Using buttons to vertically scroll page

Question

I actually have a div with a staticheight and 100% width. Currently this div has overflow:auto so there is a vertical scrollbar.

But for this project it's necessary to have this div without any scrollbars. So I have two buttons - one at the div's top and one at the end for scrolling. But until now I was unable to find a solution to make the div scrolling (for several px OR scrolling while mouseover) using this buttons.

(I'm commonly using jQuery, but weren't able to use it's scrollTop()-Method)

So please help me!

Why not just use the Page Up and Page Down keys and hide the scrollbar? — Tamara Wijsman
– Tamara Wijsman, Commented Aug 28, 2011 at 10:24
Why weren't you able to use scrollTop()? (Hint: post the code you tried). — Matthew
– Matthew, Commented Aug 28, 2011 at 10:34
@MxAgent: Why hide the scroll bar then? Your idea is inconsistent with standards... — Tamara Wijsman
– Tamara Wijsman, Commented Aug 28, 2011 at 10:52
@Tom Here is a similar scrolling-solution: michaelheinsen.de (click on imprint) - But this is implemented in flash - I need this kind of scrollsolution for css / js — Micronax
– Micronax, Commented Aug 28, 2011 at 11:04

T.J. Crowder · Accepted Answer · 2011-08-28 10:36:00Z

3

I'd expect scrollTop to be just what you were looking for (though I would argue against this user experience barring a really good reason to be this non-standard).

It works for me (live copy):

CSS:

#theDiv {
  height: 10em;
  overflow: hidden;
  border: 1px solid #ddd;
}

HTML:

<input id="btnDown" type="button" value="Down">
<input id="btnUp"   type="button" value="Up">
<div id="theDiv"></div>

JavaScript w/jQuery:

jQuery(function($) {
  var theDiv;

  theDiv = $("#theDiv");
  fill();

  $("#btnDown").click(function() {
    theDiv.scrollTop(theDiv.scrollTop() + 10);
  });
  $("#btnUp").click(function() {
    var top = Math.max(theDiv.scrollTop() - 10, 0);
    theDiv.scrollTop(top);
  });

  function fill() {
    var n, s;

    s = "Line 0";
    for (n = 1; n < 20; ++n) {
      s += "<br>Line " + n;
    }
    theDiv.html(s);
  }
});

answered Aug 28, 2011 at 10:36

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Micronax Over a year ago

Thank you! That's working perfectly for me together with stackoverflow.com/questions/3966273/… :)

Collectives™ on Stack Overflow

Javascript / css: Using buttons to vertically scroll page

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related