javascript - top - jquery scroll to last element




jQuery blättern zu Element (16)

Ich habe dieses input :

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

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

Wenn der Benutzer mit #subject auf diese input #subject , sollte die Seite mit einer netten Animation zum letzten Element der Seite blättern. Es sollte eine Schriftrolle nach unten und nicht nach oben sein.

Das letzte Element der Seite ist eine #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.


Wenn der Benutzer mit #subject auf diese Eingabe klickt, sollte die Seite mit einer netten Animation zum letzten Element der Seite blättern. Es sollte eine Schriftrolle nach unten und nicht nach oben sein.

Das letzte Element der Seite ist eine Senden-Schaltfläche mit #submit

$('#subject').click(function()
{
    $('#submit').focus();
    $('#subject').focus();
});

Dies führt zunächst zu #submit dann wird der Cursor wieder auf die Eingabe zurückgesetzt, auf die geklickt wurde, wodurch eine #submit wird. Dies funktioniert in den meisten Browsern. Es erfordert auch nicht jQuery, da es in reinem JavaScript geschrieben werden kann.

Kann diese Art der Verwendung der Fokusfunktion die Animation besser imitieren, indem Fokusaufrufe verkettet werden. Ich habe diese Theorie nicht getestet, aber sie würde in etwa so aussehen:

<style>
  #F > *
  {
    width: 100%;
  }
</style>

<form id="F" >
  <div id="child_1"> .. </div>
  <div id="child_2"> .. </div>
  ..
  <div id="child_K"> .. </div>
</form>

<script>
  $('#child_N').click(function()
  {
    $('#child_N').focus();
    $('#child_N+1').focus();
    ..
    $('#child_K').focus();

    $('#child_N').focus();
  });
</script>

Angenommen, Sie haben eine Schaltfläche mit der ID- button , versuchen Sie dieses Beispiel:

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

Ich habe den Code aus dem Artikel Smoothly zu einem Element ohne ein jQuery-Plugin scrollen . 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>


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 ist der zurückgegebene Wert von $("...").offset().top manchmal in float .
Verwenden Sie: parseInt($("....").offset().top)

Beispielsweise:

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

Dies ist mein Ansatz, der die IDs und hrefs abstrahiert und dabei einen generischen Klassenselektor verwendet

$(function() {
  // Generic selector to be used anywhere
  $(".js-scroll-to").click(function(e) {

    // Get the href dynamically
    var destination = $(this).attr('href');

    // Prevent href=“#” link from changing the URL hash (optional)
    e.preventDefault();

    // Animate scroll to destination
    $('html, body').animate({
      scrollTop: $(destination).offset().top
    }, 500);
  });
});
<!-- example of a fixed nav menu -->
<ul class="nav">
  <li>
    <a href="#section-1" class="nav-item js-scroll-to">Item 1</a>
  </li>
  <li>
    <a href="#section-2" class="nav-item js-scroll-to">Item 2</a>
  </li>
  <li>
    <a href="#section-3" class="nav-item js-scroll-to">Item 3</a>
  </li>
</ul>


Einfacher Weg, um den Scroll der Seite zu erreichen, um div id zu zielen

var targetOffset = $('#divID').offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1000);

Für das, was es wert ist, gelang es mir, ein solches Verhalten für ein allgemeines Element zu erreichen, das in einem DIV mit Scrolling sein kann. In unserem Fall scrollen wir nicht den ganzen Körper, sondern nur bestimmte Elemente mit Überlauf: auto; in einem größeren Layout.

Es erstellt eine falsche Eingabe der Höhe des Zielelements und legt dann einen Fokus darauf, und der Browser wird sich um den Rest kümmern, egal wie tief in der scrollbaren Hierarchie Sie sich befinden. Klappt wunderbar.

var $scrollTo = $('#someId'),
inputElem = $('<input type="text"></input>');

$scrollTo.prepend(inputElem);
inputElem.css({
  position: 'absolute',
  width: '1px',
  height: $scrollTo.height()
});
inputElem.focus();
inputElem.remove();

Ich habe eine allgemeine Funktion geschrieben, die entweder zu einem jQuery-Objekt, einem CSS-Selektor oder einem numerischen Wert scrollt.

Beispielverwendung:

// scroll to "#target-element":
$.scrollTo("#target-element");

// scroll to 80 pixels above first element with class ".invalid":
$.scrollTo(".invalid", -80);

// scroll a container with id "#my-container" to 300 pixels from its top:
$.scrollTo(300, 0, "slow", "#my-container");

Der Code der Funktion:

/**
* Scrolls the container to the target position minus the offset
*
* @param target    - the destination to scroll to, can be a jQuery object
*                    jQuery selector, or numeric position
* @param offset    - the offset in pixels from the target position, e.g.
*                    pass -80 to scroll to 80 pixels above the target
* @param speed     - the scroll speed in milliseconds, or one of the
*                    strings "fast" or "slow". default: 500
* @param container - a jQuery object or selector for the container to
*                    be scrolled. default: "html, body"
*/
jQuery.scrollTo = function (target, offset, speed, container) {

    if (isNaN(target)) {

        if (!(target instanceof jQuery))
            target = $(target);

        target = parseInt(target.offset().top);
    }

    container = container || "html, body";
    if (!(container instanceof jQuery))
        container = $(container);

    speed = speed || 500;
    offset = offset || 0;

    container.animate({
        scrollTop: target + offset
    }, speed);
};

In den meisten Fällen wäre es am besten, ein Plugin zu verwenden. Ernst. Ich werde meine hier anpreisen . Natürlich gibt es auch andere. Aber bitte überprüfe, ob sie wirklich die Fallstricke vermeiden, für die du überhaupt ein Plugin haben möchtest - nicht alle von ihnen.

Ich habe über die Gründe für die Verwendung eines Plugins an elsewhere . Kurz gesagt, der eine Liner untermauert die meisten Antworten hier

$('html, body').animate( { scrollTop: $target.offset().top }, duration );

ist schlecht UX.

  • Die Animation reagiert nicht auf Benutzeraktionen. Es wird fortgesetzt, selbst wenn der Benutzer klickt, klickt oder versucht, einen Bildlauf durchzuführen.

  • Wenn sich der Anfangspunkt der Animation in der Nähe des Zielelements befindet, ist die Animation sehr langsam.

  • Wenn das Zielelement am unteren Rand der Seite platziert wird, kann nicht zum oberen Rand des Fensters gescrollt werden. Die Scroll-Animation stoppt abrupt in der mittleren Bewegung.

Um diese Probleme (und eine elsewhere ) zu behandeln, können Sie ein Plugin von mir verwenden, jQuery.scrollable . Der Anruf wird dann

$( window ).scrollTo( targetPosition );

und das ist es. Natürlich gibt es mehr Möglichkeiten .

In Bezug auf die Zielposition $target.offset().top den Job in den meisten Fällen. Bitte beachten Sie jedoch, dass der zurückgegebene Wert keine Grenze für das html Element berücksichtigt ( siehe diese Demo ). Wenn Sie die Zielposition unter allen Umständen genau benötigen, ist es besser zu verwenden

targetPosition = $( window ).scrollTop() + $target[0].getBoundingClientRect().top;

Das funktioniert auch, wenn ein Rahmen für das html Element gesetzt ist.


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.


Schauen Sie sich das ScrollTo Plugin an. Sie können die Demo .

Ich hoffe, es hilft.


Um das vollständige Element anzuzeigen (wenn es mit der aktuellen Fenstergröße möglich ist):

var element       = $("#some_element");
var elementHeight = element.height();
var windowHeight  = $(window).height();

var offset = Math.min(elementHeight, windowHeight) + element.offset().top;
$('html, body').animate({ scrollTop: offset }, 500);

Wenn Sie innerhalb eines Überlaufcontainers scrollen möchten (anstatt $('html, body') oben beschrieben), arbeiten Sie auch mit absoluter Positionierung. Dies ist der Weg:

var elem = $('#myElement'),
    container = $('#myScrollableContainer'),
    pos = elem.position().top + container.scrollTop() - container.position().top;

container.animate({
  scrollTop: pos
}

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.


jQuery .scrollTo ():

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.

offsetTop : Eine Zahl, die einen zusätzlichen Abstand oberhalb des Bildlaufziels definiert.

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

Lockern : Ein String, der angibt, welche Beschleunigungsfunktion für den Übergang verwendet werden soll.

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


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>


$('html, body').animate({scrollTop: 
  Math.min( 
    $(to).offset().top-margintop, //margintop is the margin above the target
    $('body')[0].scrollHeight-$('body').height()) //if the target is at the bottom
}, 2000);






jquery