Frage jQuery blättern zu Element


ich habe das input Element:

<input type="text" class="textfield" value="" id="subject" name="subject">

Dann habe ich einige andere Elemente, wie andere Texteingaben, Textareas usw.

Wenn der Benutzer darauf klickt input mit #subject, sollte die Seite mit einer netten Animation zum letzten Element der Seite rollen. Es sollte eine Schriftrolle nach unten und nicht nach oben sein.

Das letzte Element der Seite ist a submit Schaltfläche mit #submit:

<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">

Die Animation sollte nicht zu schnell und flüssig sein.

Ich führe die neueste jQuery-Version. Ich bevorzuge es, kein Plugin zu installieren, sondern die Standard-jQuery-Funktionen zu verwenden, um dies zu erreichen.


1871
2017-07-13 09:49


Ursprung


Antworten:


Angenommen, Sie haben einen Button mit der ID button, versuche dieses Beispiel:

$("#button").click(function() {
    $([document.documentElement, document.body]).animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Ich habe den Code aus dem Artikel bekommen Scrollt sanft zu einem Element ohne ein jQuery-Plugin. Und ich habe es am Beispiel unten getestet.

<html>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>
        $(document).ready(function (){
            $("#click").click(function (){
                $('html, body').animate({
                    scrollTop: $("#div1").offset().top
                }, 2000);
            });
        });
    </script>
    <div id="div1" style="height: 1000px; width 100px">
        Test
    </div>
    <br/>
    <div id="div2" style="height: 1000px; width 100px">
        Test 2
    </div>
    <button id="click">Click me</button>
</html>


3478
2017-07-13 09:52



  jQuery .scrollTo() Method 

jQuery .scrollTo ():  Ansicht - Demo, API, Quelle

Ich habe dieses leichtgewichtige Plugin geschrieben, um das Blättern von Seiten / Elementen zu vereinfachen. Es ist flexibel, wo Sie ein Zielelement oder einen angegebenen Wert übergeben können. Vielleicht könnte dies Teil der nächsten offiziellen Veröffentlichung von jQuery sein, was denkst du?


Beispiele Verwendung:

$('body').scrollTo('#target'); // Scroll screen to target element

$('body').scrollTo(500); // Scroll screen 500 pixels down

$('#scrollable').scrollTo(100); // Scroll individual element 100 pixels down

Optionen:

scrollTarget: Ein Element, eine Zeichenfolge oder eine Zahl, die die gewünschte Bildlaufposition angibt.

VersatzTop: Eine Zahl, die zusätzlichen Abstand über dem Bildlaufziel definiert.

Dauer: Eine Zeichenfolge oder Zahl, die angibt, wie lange die Animation ausgeführt wird.

Lockerung: Eine Zeichenfolge, die angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.

Komplett: Eine Funktion, die aufgerufen wird, sobald die Animation abgeschlossen ist.


453
2017-10-05 08:50



Wenn Sie sich nicht für den glatten Scroll-Effekt interessieren und nur daran interessiert sind, zu einem bestimmten Element zu scrollen, benötigen Sie dafür keine jQuery-Funktion. Javascript hat deinen Fall abgedeckt:

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

Alles, was Sie tun müssen, ist: $("selector").get(0).scrollIntoView(); 

.get(0) wird verwendet, weil wir das DOM-Element von JavaScript und nicht das DOM-Element von JQuery abrufen möchten.


267
2017-12-24 11:35



Besuche die ScrollTo Plugin. Sie können die Demo sehen Hier.

Ich hoffe, es hilft.


42
2017-07-13 11:05



jQuery(document).ready(function($) {
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate( {
      'scrollTop': $target.offset().top-40
    }, 900, 'swing', function () {
      window.location.hash = target;
    } );
  } );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<ul role="tablist">
  <li class="active" id="p1"><a href="#pane1" role="tab">Section 1</a></li>
  <li id="p2"><a href="#pane2" role="tab">Section 2</a></li>
  <li id="p3"><a href="#pane3" role="tab">Section 3</a></li>
</ul>

<div id="pane1"></div>
<div id="pane2"></div>
<div id="pane3"></div>


26
2017-07-18 18:06



Mit diesem einfachen Skript

if($(window.location.hash).length > 0){
        $('html, body').animate({ scrollTop: $(window.location.hash).offset().top}, 1000);
}

Würde in Sortierung, dass, wenn ein Hash-Tag in der URL gefunden wird, die ScrollTo zu der ID animieren. Wenn das Hash-Tag nicht gefunden wurde, ignorieren Sie das Skript.


26
2017-09-05 11:53



Die Lösung von Steve und Peter funktioniert sehr gut.

In manchen Fällen müssen Sie den Wert jedoch in eine Ganzzahl konvertieren. Seltsamerweise der zurückgegebene Wert von $("...").offset().top ist manchmal in float.
Benutzen: parseInt($("....").offset().top)

Beispielsweise:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: parseInt($("#elementtoScrollToID").offset().top)
    }, 2000);
});

15
2018-02-06 15:39



Eine kompakte Version der "animierten" Lösung.

$.fn.scrollTo = function (speed) {
    if (typeof(speed) === 'undefined')
        speed = 1000;

    $('html, body').animate({
        scrollTop: parseInt($(this).offset().top)
    }, speed);
};

Grundlegende Verwendung: $('#your_element').scrollTo();


15
2017-08-29 11:19