it-swarm.com.de

jQuery zum Element scrollen

Ich habe dieses input Element:

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

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

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

Das letzte Element der Seite ist eine Schaltfläche submit 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 verwende die neueste jQuery-Version. Ich ziehe es vor, kein Plugin zu installieren, sondern die Standardfunktionen von jQuery zu verwenden, um dies zu erreichen.

2139
DiegoP.

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

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

Ich habe den Code aus dem Artikel Scrolle reibungslos zu einem Element ohne ein jQuery-Plugin. Und ich habe es am folgenden Beispiel 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>
3809
Steve

jQuery .scrollTo() Method

jQuery .scrollTo (): View - Demo, API, Source

Ich habe dieses Plugin geschrieben, um das Scrollen von Seiten und Elementen zu vereinfachen. Es ist flexibel, wo Sie ein Zielelement oder einen bestimmten 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 den zusätzlichen Abstand über dem Bildlaufziel definiert.

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

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

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

496
Timothy Perez

Wenn Sie sich nicht für den Smooth-Scroll-Effekt interessieren und nur zu einem bestimmten Element scrollen möchten, benötigen Sie dafür keine jQuery-Funktion. Javascript hat Ihren 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 das DOM-Element von JavaScript und nicht das DOM-Element von JQuery abgerufen werden soll.

336
Atharva

Mit diesem einfachen Skript

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

Würde in der Sortierung machen, dass, wenn ein Hash-Tag in der URL gefunden wird, der scrollTo zur ID animiert. Wenn kein Hash-Tag gefunden wurde, ignorieren Sie das Skript.

42
Warface
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>
31
davidcondrey

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

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

Zum Beispiel:

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

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);
};

Grundsätzliche Verwendung: $('#your_element').scrollTo();

19
Rezgar Cadro

Wenn Sie nur zu einem Eingabeelement scrollen, können Sie focus() verwenden. Wenn Sie beispielsweise zur ersten sichtbaren Eingabe blättern möchten:

$(':input:visible').first().focus();

Oder die erste sichtbare Eingabe in einem Container mit der Klasse .error:

$('.error :input:visible').first().focus();

Vielen Dank an Tricia Ball für diesen Hinweis!

16
Benjamin Oakes

Mit diese Lösung brauchst du kein Plugin und es ist kein Setup erforderlich neben dem Platzieren des Skripts vor Ihrem schließenden </body> -Tag.

$("a[href^='#']").on("click", function(e) {
  e.preventDefault();
  $("html, body").animate({
    scrollTop: $($(this).attr("href")).offset().top
  }, 1000);
});

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

Wenn sich beim Laden ein Hash in der Adresse befindet, scrollen wir dorthin.

Und - wann immer Sie auf einen a -Link mit einem href -Hash klicken, z. #top, wir scrollen dorthin.

15
Jonathan

Ich kenne einen Weg ohne jQuery:

document.getElementById("element-id").scrollIntoView();
11
GameMaster1928

In den meisten Fällen ist es am besten, ein Plugin zu verwenden. Ernsthaft. Ich werde hier meine ankündigen . Natürlich gibt es auch andere. Aber bitte überprüfen Sie, ob sie wirklich die Fallstricke vermeiden, für die Sie ein Plugin möchten - nicht alle von ihnen.

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

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

ist schlecht UX.

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

  • Liegt der Startpunkt der Animation in der Nähe des Zielelements, ist die Animation äußerst langsam.

  • Wenn sich das Zielelement am unteren Rand der Seite befindet, kann kein Bildlauf zum oberen Rand des Fensters durchgeführt werden. Die Scroll-Animation stoppt dann abrupt in der Mitte der Bewegung.

Um diese Probleme (und eine Gruppe von anderen ) zu lösen, 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 erledigt $target.offset().top in den meisten Fällen die Aufgabe. Beachten Sie jedoch, dass der zurückgegebene Wert keinen Rahmen für das html -Element berücksichtigt ( , siehe diese Demo ). Wenn die Zielposition unter allen Umständen genau sein muss, ist es besser, sie zu verwenden

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

Dies funktioniert auch dann, wenn ein Rahmen für das html -Element festgelegt ist.

7
hashchange

Wenn Sie in einem Überlaufcontainer scrollen möchten (anstelle von $('html, body'), das oben beantwortet wurde) und auch mit absoluter Positionierung arbeiten möchten, gehen Sie wie folgt vor:

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

container.animate({
  scrollTop: pos
}
6
FAjir

Sehr einfach und leicht zu benutzendes benutzerdefiniertes jQuery-Plugin. Fügen Sie einfach das Attribut scroll= zu Ihrem anklickbaren Element hinzu und setzen Sie seinen Wert auf den Selektor, zu dem Sie blättern möchten.

Wie so: <a scroll="#product">Click me</a>. Es kann für jedes Element verwendet werden.

(function($){
    $.fn.animateScroll = function(){
        console.log($('[scroll]'));
        $('[scroll]').click(function(){
            selector = $($(this).attr('scroll'));
            console.log(selector);
            console.log(selector.offset().top);
            $('html body').animate(
                {scrollTop: (selector.offset().top)}, //- $(window).scrollTop()
                1000
            );
        });
    }
})(jQuery);

// RUN
jQuery(document).ready(function($) {
    $().animateScroll();
});

// IN HTML EXAMPLE
// RUN ONCLICK ON OBJECT WITH ATTRIBUTE SCROLL=".SELECTOR"
// <a scroll="#product">Click To Scroll</a>
5
DevWL

Dies ist mein Ansatz, die IDs und HREFs mithilfe eines generischen Klassenselektors zu abstrahieren

$(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>
5
vascogaspar

Einfache Methode, um die Seite zur Ziel-Div-ID zu scrollen

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

Animationen:

// slide to top of the page
$('.up').click(function () {
    $("html, body").animate({
        scrollTop: 0
    }, 600);
    return false;
});

// slide page to anchor
$('.menutop b').click(function(){
    //event.preventDefault();
    $('html, body').animate({
        scrollTop: $( $(this).attr('href') ).offset().top
    }, 600);
    return false;
});

// Scroll to class, div
$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#target-element").offset().top
    }, 1000);
});

// div background animate
$(window).scroll(function () {

    var x = $(this).scrollTop();

    // freezze div background
    $('.banner0').css('background-position', '0px ' + x +'px');

    // from left to right
    $('.banner0').css('background-position', x+'px ' +'0px');

    // from right to left
    $('.banner0').css('background-position', -x+'px ' +'0px');

    // from bottom to top
    $('#skills').css('background-position', '0px ' + -x + 'px');

    // move background from top to bottom
    $('.skills1').css('background-position', '0% ' + parseInt(-x / 1) + 'px' + ', 0% ' + parseInt(-x / 1) + 'px, center top');

    // Show hide mtop menu  
    if ( x > 100 ) {
    $( ".menu" ).addClass( 'menushow' );
    $( ".menu" ).fadeIn("slow");
    $( ".menu" ).animate({opacity: 0.75}, 500);
    } else {
    $( ".menu" ).removeClass( 'menushow' );
    $( ".menu" ).animate({opacity: 1}, 500);
    }

});

// progres bar animation simple
$('.bar1').each(function(i) {
  var width = $(this).data('width');  
  $(this).animate({'width' : width + '%' }, 900, function(){
    // Animation complete
  });  
});
5
user7601056

So mache ich es.

document.querySelector('scrollHere').scrollIntoView({ behavior: 'smooth' })

Funktioniert in jedem Browser.

Es kann leicht in eine Funktion eingebunden werden

function scrollTo(selector) {
    document.querySelector(selector).scrollIntoView({ behavior: 'smooth' })
}

Hier ist ein Arbeitsbeispiel

$(".btn").click(function() {
  document.getElementById("scrollHere").scrollIntoView( {behavior: "smooth" })
})
.btn {margin-bottom: 500px;}
.middle {display: block; margin-bottom: 500px; color: red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="btn">Scroll down</button>

<h1 class="middle">You see?</h1>

<div id="scrollHere">Arrived at your destination</div>

Docs

4

$('html, body').animate(...) geht für mich nicht auf iPhone, Android chrome Safari-Browser.

Ich musste das Stamminhaltselement der Seite als Ziel festlegen.

$ ('# cotnent'). animieren (...)

Hier ist, was ich am Ende habe

if (navigator.userAgent.match(/(iPod|iPhone|iPad|Android)/)) {           
    $('#content').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
   }, 'slow');
}
else{
    $('html, body').animate({
    scrollTop: $("#elementtoScrollToID").offset().top
    }, 'slow');
}

Alle Körperinhalte sind mit einem #content div verknüpft

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
4
Shahdat
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

    $parent.animate({
        scrollTop : topDiff
    }, 100);
};
4
kayz1

Dies ist Atharvas Antwort von: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView . Wollte nur hinzufügen, ob sich Ihr Dokument in einem Iframe befindet, können Sie ein Element im übergeordneten Frame auswählen, um in die Ansicht zu scrollen:

 $('#element-in-parent-frame', window.parent.document).get(0).scrollIntoView();
3
cynya
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>
3
Minguocode

Ich habe ein Modul eingerichtet scroll-elementnpm install scroll-element. Das funktioniert so:

import { scrollToElement, scrollWindowToElement } from 'scroll-element'

/* scroll the window to your target element, duration and offset optional */
let targetElement = document.getElementById('my-item')
scrollWindowToElement(targetElement)

/* scroll the overflow container element to your target element, duration and offset optional */
let containerElement = document.getElementById('my-container')
let targetElement = document.getElementById('my-item')
scrollToElement(containerElement, targetElement)

Mit Hilfe der folgenden SO Posts geschrieben:

Hier ist der Code:

export const scrollToElement = function(containerElement, targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let targetOffsetTop = getElementOffset(targetElement).top
  let containerOffsetTop = getElementOffset(containerElement).top
  let scrollTarget = targetOffsetTop + ( containerElement.scrollTop - containerOffsetTop)
  scrollTarget += offset
  scroll(containerElement, scrollTarget, duration)
}

export const scrollWindowToElement = function(targetElement, duration, offset) {
  if (duration == null) { duration = 1000 }
  if (offset == null) { offset = 0 }

  let scrollTarget = getElementOffset(targetElement).top
  scrollTarget += offset
  scrollWindow(scrollTarget, duration)
}

function scroll(containerElement, scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( containerElement.scrollTop < scrollTarget ) {
      containerElement.scrollTop += scrollStep
    } else {
      clearInterval(interval)
    }
  },15)
}

function scrollWindow(scrollTarget, duration) {
  let scrollStep = scrollTarget / (duration / 15)
  let interval = setInterval(() => {
    if ( window.scrollY < scrollTarget ) {
      window.scrollBy( 0, scrollStep )
    } else {
      clearInterval(interval)
    }
  },15)
}

function getElementOffset(element) {
  let de = document.documentElement
  let box = element.getBoundingClientRect()
  let top = box.top + window.pageYOffset - de.clientTop
  let left = box.left + window.pageXOffset - de.clientLeft
  return { top: top, left: left }
}
2
svnm

Das hat bei mir funktioniert:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
2
Polaris
$('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);
2
user669677

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

Anwendungsbeispiel:

// 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 Funktionscode:

/**
* 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);
};
2
isapir

So zeigen Sie das vollständige Element an (falls dies 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);
2

Wenn der Benutzer mit #subject auf diese Eingabe klickt, sollte die Seite mit einer netten Animation zum letzten Element der Seite scrollen. 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 zuerst einen Bildlauf nach unten zu #submit durch und stellt dann den Cursor wieder auf die angeklickte Eingabe zurück. Dies ahmt einen Bildlauf nach unten nach und funktioniert in den meisten Browsern. Es erfordert auch kein jQuery, da es in reinem JavaScript geschrieben werden kann.

Kann diese Art der Verwendung von focus die Animation besser imitieren, indem focus Aufrufe verkettet werden? Ich habe diese Theorie nicht getestet, aber sie würde ungefähr 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>
2
Khaled.K

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

Es wird eine falsche Eingabe der Höhe des Zielelements erstellt und dann ein Fokus darauf gelegt, und der Browser kümmert sich um den Rest, unabhängig davon, wie tief Sie sich in der scrollbaren Hierarchie 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();
2
martinh_kentico

Aktualisierte Antwort ab 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
1
kejodion