Nrc
Nrc

Reputation: 9787

Button to scroll

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

Upvotes: 2

Views: 401

Answers (3)

j08691
j08691

Reputation: 207861

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

Upvotes: 1

Anujith
Anujith

Reputation: 9370

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

})

Upvotes: 3

Mark Pieszak - Trilon.io
Mark Pieszak - Trilon.io

Reputation: 66921

.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

Upvotes: 2

Related Questions