Button to scroll

Question

I am trying to scroll the text which is inside .text, when I click to .down. I have a simple text with overflow hidden. I have the example here: http://jsbin.com/ofaquh/1/edit

I have been looking to the jQuery scrollTo function, but I think I don't know how to use it well:

$(function(){      
    $(".down").click(function() {
        $(".text").scrollTo(20);
    });
})

possible duplicate of [jQuery animate scroll](http://stackoverflow.com/questions/8047454/jquery-animate-scroll) — Blazemonger, Dec 19 '12 at 18:16

score 3 · Answer 1 · answered Dec 19 '12 at 18:14

3

See fiddle : http://jsfiddle.net/AWQzg/

Use scrollTop()

$(function(){

$(".down").click(function() {
    $(".text").scrollTop(20);
});

})

See : http://jsfiddle.net/AWQzg/1/ for repeated scroll of 20px on each click

$(function(){

$(".down").click(function() {
    $(".text").scrollTop($(".text").scrollTop() + 20);
});

})

answered Dec 19 '12 at 18:14

Anujith

9,370
6
33
48

Your answer is very good, thank you. Thanks to you I could do the up button too: http://jsfiddle.net/AWQzg/3/ Is it possible to make a complete scroll bar in such a easy way? – Nrc Dec 19 '12 at 18:53

score 2 · Accepted Answer · answered Dec 19 '12 at 18:14

2

.scrollTo() is actually a plugin.

You can use .animate() and scrollTop and achieve the same result:

$(".down").click(function() {
    $(".text").animate({ scrollTop: 200 });
});

jsBin Demo

answered Dec 19 '12 at 18:14

Mark Pieszak - Trilon.io

61,391
14
82
96

[`.scrollTo` was vanilla JS first.](https://developer.mozilla.org/en-US/docs/DOM/window.scrollTo) I still confuse them all the time. – Blazemonger Dec 19 '12 at 18:15
The best thing about using `.animate` is that you can use `'+=20'` instead of `20` to keep scrolling. [fiddle](http://jsfiddle.net/mblase75/jg4AS/) – Blazemonger Dec 19 '12 at 18:17
Oops accidentally deleted my comment lol. Yeah I love the ability to add/subtract on the fly. – Mark Pieszak - Trilon.io Dec 19 '12 at 18:18
You answer is just great! It is so clean and easy. I added here the up button too: http://jsbin.com/ofaquh/12/edit Is there a way as easy as this to add a bar or reference to know the length of the text? – Nrc Dec 19 '12 at 18:47
I have no idea. I just want to learn new things and improve this – Nrc Dec 19 '12 at 18:55
Just do `overflow-y:scroll;` instead of `overflow:hidden;`. The scrolling functionality will still work, and you'll have a scrollbar that way. – Mark Pieszak - Trilon.io Dec 19 '12 at 19:00
Yes I know that, but I mean to design my own scroll. For instance to make just one small dot to indicate the position of the text – Nrc Dec 19 '12 at 19:01
You'd have to do a bunch of javascript yourself, or use a plugin like this: http://www.myjqueryplugins.com/jquery-plugin/jscrollbar – Mark Pieszak - Trilon.io Dec 19 '12 at 19:09

j08691 · Answer 3 · 2012-12-19T18:18:43.440

1

Unless you're using the scrollTo plugin I think you want to use jQuery's scrollTop function.

Ex: $(".text").scrollTop(20);

Or, in response to your question in the comments, try:

var move = 20;     
$(".down").click(function() {
    $(".text").scrollTop(move);
        move += 20;
});

edited Dec 19 '12 at 18:18

answered Dec 19 '12 at 18:13

j08691

204,283
31
260
272

That's it! And how can I scroll 20px each time I click? – Nrc Dec 19 '12 at 18:16
Change your function to increment the scrollTop with a variable. See my updated answer and this jsbin http://jsbin.com/ofaquh/11/edit. – j08691 Dec 19 '12 at 18:17
Your solution is great. I tried to add the up button but there is something estrange when it arrives to the bottom, it cannot go up again: http://jsbin.com/ofaquh/12/edit – Nrc Dec 19 '12 at 18:43
Sorry I gave you the adaptation of another answer. The jsbin with the two buttons with your code is this: http://jsbin.com/ofaquh/13/edit This is the one that has the problem. – Nrc Dec 20 '12 at 16:24
Looks like you accepted an answer for this question. Do you still need help? – j08691 Dec 20 '12 at 16:32
No, I don't need any help. I just explained why I selected another option. Anyway, your option was really good and quite close. Thank you! – Nrc Dec 21 '12 at 17:57

Button to scroll

3 Answers3