JavaScript scrollen Sie auf div mit der animation

Ich habe eine PhoneGap-Anwendung, die beim öffnen einer HTML-Seite möchte ich es, um zu Blättern, um eine bestimmte <div> element. Bisher habe ich in der Lage, es zu machen, dass mit diesem Skript mit jQuery:

<script>
$(document).delegate('.ui-page', 'pageshow', function () {
     var offset = $(this).find('#timeindicatordiv').offset().top;
     setTimeout(function () {
        $.mobile.silentScroll(offset);
        }, 0);
     });
</script>

Diese nur gibt mir einen Sprung direkt zu der <div> die sieht ein bisschen abgehackt.

Gibt es eine Möglichkeit zu geben, das eine flüssige animation?

InformationsquelleAutor Luddig | 2013-10-21
  1. 23

    Können Sie Folgendes tun:

    var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 600;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}

//specify id of element and optional scroll speed as arguments
scrollToElement('#timeindicatordiv', 600);

    jsfiddle/Beispiel: http://jsfiddle.net/dtR34/4/

    • Dies funktioniert gut, akzeptieren es immer, scrollt nach unten. Wie kann ich kontrollieren, wie weit er scrollt?
    • Sie passieren die scrollToElement Funktion der id von dem element, das Sie möchten, Blättern Sie zu. In dem Beispiel, das ich Euch gab, die #timeindicatordiv element ist an der Unterseite der Seite, so ist es das scrollen zu.
    • Ich aktualisiert meine Antwort, nehmen Sie einen Blick!
    • Ihre Vorherige Antwort sah besser aus denke ich 🙂
    • Ich rollte Sie zurück und haben ein Beispiel geliefert, in der fiddle!
    InformationsquelleAutor kyle.stearns
  2. 1

    Machen Sie es wie diese:

    $("html,body").animate({scrollTop: offset}, 600);
    InformationsquelleAutor Nelson
  3. 0

    JS:

    $('.click').click(function(l){
   //prevent default action

   l.preventDefault();

   scrollToElement( $(this).attr('href'), 2000 );
});

var scrollToElement = function(el, ms){
    var speed = (ms) ? ms : 2000;
    $('html,body').animate({
        scrollTop: $(el).offset().top
    }, speed);
}

    CSS:

    div {
    margin-top:1000px;
}
div:last-child {
    padding-bottom:1000px;
}

    HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#link1" class="click">link 1</a><br />
<a href="#link2" class="click">link 2</a><br />
<a href="#link3" class="click">link 3</a><br />


<div id="link1">Link 1</div>
<div id="link2">Link 2</div>
<div id="link3">Link 3</div>

    • Bitte berücksichtigen Sie, einschließlich eine Erklärung, was Ihr code tut. Während der code das problem lösen kann, code-nur die Antworten sind im Allgemeinen nicht sehr nützlich für die Breite öffentlichkeit.
    InformationsquelleAutor Shrikant Gangamwar
Schreibe einen Kommentar