Kann ich in jQuery slideDown() als Scroll-Down-Funktion für ein div mit großem Inhalt verwenden?

Question

Was ich will ist, verwenden Sie einen Effekt, der viel glatter nach unten und oben scrollen, als die Funktion, die ich habe.

Ich habe ein äußeres div (mit Überlauf: versteckt) und ein div kleiner in der Breite (class = 'all_content').

<a href='#' class='up'>Up</a> 
<a href='#' class='down'>Down</a> 
<div class='container'> 
<div class='all_content'> All the content is here </div> 
</div> 

Ich habe diesen Code:

$(".down").click(function() { 
     $(".all_content").animate({marginTop: '-=20px'}, 0); 
    }); 

$(".up").click(function() { 
     $(".all_content").animate({ marginTop: '+=20px' }, 0); 
    }); 

Aber es fühlt sich wirklich schlampig mit, dass + 20px-Marge.

Kann ich slideDown() verwenden? Soll ich den scrollTop damit benutzen?

Vielen Dank im Voraus

Answer 1

Sie zum scrollTo() plugin wollen werden, die Sie wie folgt aufrufen können:

$(".all_content").scrollTo({top: "+20px"}, 1000); 

Edit: Hier ist eine überarbeitete Version des Codes Sie auf dem Laufenden:

$(".down").click(function() { 
    $(".all_content").scrollTo({ 
     top: '-=20px' 
    }, 1000); 
}); 

$(".up").click(function() { 
    $(".all_content").scrollTo({ 
     top: '+=20px' 
    }, 1000); 
});​ 

Stellen Sie sicher, dass Sie das scrollTo-Plug-in enthalten, bevor Sie Ihre js-Hauptdatei (en) hinzufügen.

Answer 2

Sollte kein Problem sein, wenn Sie Ihre div mit Überlauf definieren: wie folgt bewegen:

div 
{ 
    width:150px; 
    height:150px; 
    overflow:scroll; 
} 

Answer 3

Sie jquery scrollTop verwenden können() -Methode:

$(".all_content").scrollTop(20);