jQuery zum Element scrollen

2324

Ich habe dieses inputElement:

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

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

Wenn der Benutzer klickt auf dem inputmit #subject, sollte die Seite auf das letzte Element der Seite scrollen mit einer netten Animation. Es sollte eine Schriftrolle nach unten und nicht nach oben sein.

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

javascript jquery scroll DiegoP.
quelle
3
developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
Christophe Roussy
scrollTowurde für mich wegen eines Chrome-Plugins deaktiviert, nicht sicher welches.
Jacksonkr

Antworten:

4020

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

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

Ich habe den Code aus dem Artikel erhalten. Scrollen Sie 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>
Erweitern Sie das Snippet

Steve
quelle
24
Dies funktioniert nicht in allen Fällen. Siehe stackoverflow.com/questions/2905867/…
Jānis Elmeris
7
@ BarryChapman nicht genau. Nach googeln ich habe festgestellt , diese , so dass beide Tags werden benötigt, wenn Sie zusätzliche Logik nicht per Browser - Typ haben wollen.
s3m3n
73
Wenn Sie keine Animation möchten und stattdessen sofort zum Element springen möchten, verwenden Sie .scrollTop(…)stattdessen .animate({scrollTop: …}, …).
Rory O'Kane
11
Zusätzlich zu Ihrer Lösung (die hervorragend funktioniert) können Sie eine vollständige Funktion hinzufügen, die der URL das Hashtag hinzufügt. In diesem Fall wird kein Bildlauf durchgeführt, da scrollTo bereits an die richtige Position gescrollt hat. Wenn ein Benutzer die URL kopiert, wird sie automatisch an der richtigen Stelle auf der Seite ausgerichtet.
Sander
10
Wenn Sie einen Rückruf verwenden, um die Animation zu beenden, und feststellen, dass der Rückruf mit dieser Lösung zweimal ausgelöst wird, versuchen Sie, "$ ('html body'). animate (..." anstelle von "$ ('html, body') zu verwenden. .animate (... "Das Komma hat zwei animierte Ereignisse erstellt. Eines für HTML, eines für Body. Sie möchten wirklich nur eines für den HTML-Body. Danke @TJ Crowder stackoverflow.com/questions/8790752/…
BoatCode
526

jQuery .scrollTo () -Methode

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

Ich habe dieses leichte Plugin geschrieben, um das Scrollen von Seiten / 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.

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

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

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

Timothy Perez
quelle
2
Es funktionierte bis zu einem kürzlich durchgeführten Update auf Chrome. Ich habe eine funktionierende Version, die ich derzeit auf memoryboxweddings.com/photography-posts verwende (wenn Sie sie ausprobieren möchten). Ich werde ein Update veröffentlichen, sobald es behoben ist.
Timothy Perez
Es stellte sich heraus, dass es sich tatsächlich um eine JS-Datei von jquery.com handelte, die sie tötete. Sollte jetzt funktionieren, wenn Sie es versuchen.
Timothy Perez
4
@ TimothyPerez: Ich bin sicher, das bedeutet etwas, das für die kommerzielle Nutzung zulässig ist? Ich bin mir sicher, dass es viele Leute gibt, die diesen Codeausschnitt einfach irgendwo auf ihren Websites verwenden möchten und die ihnen helfen würden, nachts ein bisschen leichter zu schlafen. Vielleicht könnte so etwas wie die MIT-Lizenz Ihren Anforderungen entsprechen? en.wikipedia.org/wiki/MIT_License
Robert Massaioli
13
$ ('body') hat in FF nicht funktioniert, also habe ich $ ('html, body') ausprobiert, was funktioniert hat.
Kiranvj
5
Wenn jemand diese Skriptquelle
Arturs
370

Wenn Sie nicht sehr an dem Effekt des glatten Bildlaufs interessiert sind und nur an einem Bildlauf zu einem bestimmten Element interessiert sind, benötigen Sie hierfü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 wir das DOM-Element von JavaScript und nicht das DOM-Element von JQuery abrufen möchten.

Atharva
quelle
12
Könnten Sie auch verwenden $(selector)[0]?
RobW
16
RobW, ja, Sie können nur [0] verwenden, aber get (0) schützt Sie vor undefinierten oder negativen Indizes. Siehe die Quelle: james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.get
corbacho
21
Wenn Sie jQuery überhaupt nicht verwenden möchten, verwenden Sie einfach document.getElementById('#elementID').scrollIntoView(). Es macht keinen Sinn, eine ~ 100k-Bibliothek zu laden, nur um ein Element auszuwählen und es dann in reguläres JavaScript zu konvertieren.
Gavin
62
@ Gavin Ich bin sicher, Sie meinten das so:document.getElementById('elementID').scrollIntoView()
Brian
3
Cool. Stellen Sie jedoch vor der Verwendung sicher, dass der Browser dies unterstützt.
Laut
48

Verwenden dieses einfachen Skripts

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

Würde in der Art 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.

Warface
quelle
$(window.location.hash)funktioniert nicht für Hashes, die die Regex-ID-Erkennung von jQuery nicht erfüllen. Zum Beispiel Hashes, die Zahlen enthalten. Es ist auch ein bisschen gefährlich; Das Format der Eingabe sollte überprüft werden, damit Sie kein anderes Element auswählen.
Dchacke
35 

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>
Erweitern Sie das Snippet

Davidcondrey
quelle
1
Um es universeller zu machen und unnötiges Platzieren von Hashtags im Browser-Link-Fenster zu entfernen, habe ich den Code wie jQuery(document).ready(function($) { $(document).on( "click", 'a[href^="#"]', function( e ) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ scrollTop: $target.offset().top - 100}, 1000); }); });
folgt angepasst
31

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

Zum Beispiel:

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

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

Rezgar Cadro
quelle
21

So mache ich es.

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

Funktioniert in jedem Browser.

Es kann leicht in eine Funktion eingewickelt 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>
Erweitern Sie das Snippet

Docs

Edvard Åkerberg
quelle
6
Ziemlich kurz und süß. Eine Sache zu beachten - Ich denke, dies scrollt es nur in die Ansicht (könnte sich am unteren Rand des Ansichtsfensters befinden), anstatt es an den oberen Rand des Ansichtsfensters zu scrollen, wie dies beim Einstellen von scrollTop der Fall ist.
OG Sean
20

Ich kenne einen Weg ohne jQuery:

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

Bearbeiten: Es ist zwei Jahre her und ich bekomme immer noch zufällig Ruf von diesem Beitrag lmao

GameMaster1928
quelle
18

Wenn Sie nur mit dem Scrollen zu einem Eingabeelement arbeiten, können Sie verwenden focus(). Wenn Sie beispielsweise zur ersten sichtbaren Eingabe scrollen möchten:

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

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

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

Vielen Dank an Tricia Ball für diesen Hinweis!

Benjamin Oakes
quelle
17

Mit dieser Lösung benötigen Sie kein Plugin und es ist kein Setup erforderlich, außer das Skript vor Ihrem schließenden </body>Tag zu platzieren.

$("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 die Adresse beim Laden einen Hash enthält, scrollen wir dorthin.

Und - wenn Sie auf einen aLink mit einem hrefHash klicken #top, scrollen wir dorthin.

Jonathan
quelle
Dies sollte wahrscheinlich > 1statt sein 0, nur weil /#dieses Skript kaputt geht
Tallboy
Sie sollten technisch gesehen keine leere Hash-URL haben, es sei denn, die Links sind schlecht aufgebaut, aber TY. (obwohl meine eigene Version dieses Codes diesen Patch bereits enthalten hat ^^)
Jonathan
Mit diesem Code ist ein Jitter verbunden, der jedoch leicht behoben werden kann. Sie müssen return false;am Ende des On-Click-Ereignisses verhindern, dass die Standardaktion - sofort zum Anker scrollen - ausgeführt wird.
Roncli
2
@roncli guter Punkt - alternativ können Sie einfach tune.preventDefault();
Jonathan
e.preventDefault()aktualisiert jedoch nicht den Hash in der URL beim Klicken, es ist immer eine URL ohne Hash
jayasurya_j
8

In den meisten Fällen ist es am besten, ein Plugin zu verwenden. Ernsthaft. Ich werde meine hier anpreisen . Natürlich gibt es auch andere. Aber bitte überprüfen Sie, ob sie die Fallstricke, für die Sie überhaupt ein Plugin benötigen, wirklich vermeiden - nicht alle tun dies.

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

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

ist schlecht UX.

  • Die Animation reagiert nicht auf Benutzeraktionen. Es wird auch dann fortgesetzt, wenn der Benutzer klickt, tippt oder versucht zu scrollen.

  • Wenn der Startpunkt der Animation nahe am Zielelement liegt, ist die Animation schmerzhaft langsam.

  • Wenn sich das Zielelement am unteren Rand der Seite befindet, kann es nicht zum oberen Rand des Fensters gescrollt werden. Die Bildlaufanimation stoppt dann abrupt in der Mitte der Bewegung.

Um diese Probleme (und eine Reihe anderer ) zu lösen , können Sie ein Plugin von mir, jQuery.scrollable, verwenden . 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().toperledigt die Arbeit in den meisten Fällen. Beachten Sie jedoch, dass der zurückgegebene Wert keine Begrenzung des htmlElements berücksichtigt ( siehe diese Demo ). Wenn die Zielposition unter keinen Umständen genau sein soll, ist es besser, sie zu verwenden

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

Das funktioniert auch, wenn ein Rand für das htmlElement festgelegt ist.

Hashwechsel
quelle
8

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

quelle
8

Wenn Sie innerhalb eines Überlaufcontainers scrollen möchten (anstatt $('html, body')oben beantwortet zu werden) 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
}
FAjir
quelle
7

Einfacher Weg, um den Bildlauf der Seite zur Ziel-Div-ID zu erreichen

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

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>
Erweitern Sie das Snippet

vascogaspar
quelle
6

Sehr einfaches und benutzerfreundliches 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 scrollen 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>
DevWL
quelle
4 
var scrollTo = function($parent, $element) {
    var topDiff = $element.position().top - $parent.position().top;

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

$('html, body').animate(...) funktioniert nicht für mich auf iPhone, Android Chrome Safari Browser.

Ich musste auf das Stamminhaltselement der Seite abzielen.

$ ('# 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');
}

Der gesamte Körperinhalt ist mit einem #content div verkabelt

<html>
....
<body>
<div id="content">
....
</div>
</body>
</html>
Shahdat
quelle
Sie sollten User Agent Sniffing wirklich nicht verwenden. webaim.org/blog/user-agent-string-history
Alex Podworny
Wortumbruch hinzufügen: Umbruch; zu Ihrem CSS-Element, das in Schwierigkeiten ist. Android / iOS-Webansicht jQuery.animate ({scrollTop: y}) Position Falsch. medium.com/@ellery.leung/…
daliaessam
4

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

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

quelle
3

Wenn der Benutzer mit #subject auf diese Eingabe klickt, sollte die Seite mit einer schönen 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 wird zuerst nach unten scrollen #submit dann den Cursor wieder auf die Eingabe zurückzusetzen, auf die geklickt wurde. 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 focusFunktionen die Animation durch Verketten von focusAufrufen besser imitieren? 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>
Khaled.K
quelle
3

Ich habe ein Modul- Scroll-Element eingerichtet npm install scroll-element . Es 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)

Geschrieben mit Hilfe der folgenden SO-Beiträge:

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 }
}
svnm
quelle
2

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);
Roman Shamritskiy
quelle
2

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);
};
Isapir
quelle
2

Für das, was es wert ist, habe ich es geschafft, ein solches Verhalten für ein allgemeines Element zu erreichen, das sich in einem DIV mit Bildlauf befinden kann. In unserem Fall scrollen wir nicht den ganzen Körper, sondern nur bestimmte Elemente mit Überlauf: auto; innerhalb eines größeren Layouts.

Es erstellt eine gefälschte Eingabe der Höhe des Zielelements und legt dann einen Fokus darauf. Der Browser kümmert sich um den Rest, egal 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();
martinh_kentico
quelle
2

Das hat bei mir funktioniert:

var targetOffset = $('#elementToScrollTo').offset().top;
$('#DivParent').animate({scrollTop: targetOffset}, 2500);
Polaris
quelle
2 

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>
Erweitern Sie das Snippet

Minguocode
quelle
2

EINZEILER

subject.onclick = e=> window.scroll({ top: submit.offsetTop, behavior: 'smooth'});

Code-Snippet anzeigen

Kamil Kiełczewski
quelle
1
es funktioniert perfekt!
jjoselon
1

Aktualisierte Antwort ab 2019:

$('body').animate({
    scrollTop: $('#subject').offset().top - $('body').offset().top + $('body').scrollTop()
}, 'fast');
stardust4891
quelle
Sie sollten diesen Selektor für body verwenden: [document.documentElement, document.body] AND Kein Body-Offset in der Gleichung erforderlich. $ ('# subject'). offset (). top ist genug.
Ali6p