Wie Sie das Fenster mit JQuery $ .scrollTo blättern () Funktion

Question

Ich versuche, nach unten 100px in der Nähe der Spitze der Benutzer erhält des Dokuments jedes Mal blättern.

Ich habe die Funktion ausgeführt wird, wenn der Benutzer auf den oberen Rand des Dokuments nahe kommt, aber die .scrollTo Funktion nicht funktioniert.

ich einen Alarm setzte nach und vor, um zu prüfen, ob es tatsächlich die Linie war oder nicht, dass es gestoppt und nur der erste Alarm losgeht, hier ist der Code:

alert("starting");
$.scrollTo({ top: '+=100px', left: '+=0px' }, 800);
alert("finished");

Ich weiß, dass ich die Jquery Seite richtig verbunden haben, weil ich viele andere jquery Funktionen überall, und sie alle funktionieren bin mit. Ich habe auch versucht, die ‚px‘ Entfernen von oben und es scheint nicht, einen Unterschied zu machen.

Answer 1

Wenn es nicht funktioniert, warum Sie nicht versuchen Methode mit jQuery scrollTop?

$("#id").scrollTop($("#id").scrollTop() + 100);

Wenn Sie schauen, glatt scrollen Sie grundlegende Javascript SetTimeout / setInterval-Funktion nutzen könnten, um sie über eine festgelegte Zeitdauer, in Schritten von 1 Pixel zu machen blättern.

Answer 2

$('html, body').animate({scrollTop: $("#page").offset().top}, 2000);

Answer 3

jQuery unterstützt jetzt scrollTop als Animation Variable.

$("#id").animate({"scrollTop": $("#id").scrollTop() + 100});

Sie müssen nicht mehr zu SetTimeout / setInterval glatt blättern.

Answer 4

Um die html vs body Problem zu bekommen, fest ich dies nicht die CSS direkt Animieren sondern rufe window.scrollTo(); auf jeden Schritt:

$({myScrollTop:window.pageYOffset}).animate({myScrollTop:300}, {
  duration: 600,
  easing: 'swing',
  step: function(val) {
    window.scrollTo(0, val);
  }
});

Das funktioniert gut ohne Refresh gotchas wie es mit Cross-Browser JavaScript.

Hier finden Sie aktuelle http://james.padolsey.com/javascript / Spaß-mit-jquerys-belebte / für mehr Informationen darüber, was Sie mit jQuery animieren Funktion tun können.

Answer 5

Sieht aus wie Sie die Syntax etwas falsch verstanden habe ... Ich gehe mal davon auf dem Code basiert, dass Sie versuchen 100px nach unten zu scrollen in 800ms, wenn ja, dann funktioniert dies (mit scrollTo 1.4.1):

$.scrollTo('+=100px', 800, { axis:'y' });

Answer 6

Eigentlich so etwas wie

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top +
 parseInt($("#"+prop).css('padding-top'),10) },'slow');
}

funktioniert gut und unterstützen Polsterung. Sie können auch die Margen leicht unterstützen - für die Fertigstellung siehe unten

function scrollTo(prop){
    $('html,body').animate({scrollTop: $("#"+prop).offset().top 
+ parseInt($("#"+prop).css('padding-top'),10) 
+ parseInt($("#"+prop).css('margin-top'),10) +},'slow');
}