Mit JavaScript zum Anfang der Seite scrollen?

Wie scrolle ich mit JavaScript zum Anfang der Seite? Dies ist auch dann wünschenswert, wenn die Bildlaufleiste sofort nach oben springt. Ich suche kein reibungsloses Scrollen.

Wenn Sie die Änderung nicht zum Animieren benötigen, müssen Sie keine speziellen Plugins verwenden. Ich würde nur die native JavaScript-Methode window.scrollTo verwenden. Wenn Sie 0,0 übergeben, wird die Seite sofort nach links oben gescrollt .

window.scrollTo(x-coord, y-coord);

Parameter

• x-Koordinate ist das Pixel entlang der horizontalen Achse.
• y-Koordinate ist das Pixel entlang der vertikalen Achse.

Wenn Sie reibungslos scrollen möchten, versuchen Sie Folgendes:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Das wird jedes <a>Tag nehmen, dessen href="#top"und es glatt nach oben scrollen.

Versuchen Sie dies, um nach oben zu scrollen

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

Bessere Lösung mit flüssiger Animation:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Referenz: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

Dazu benötigen Sie jQuery nicht. Ein Standard-HTML-Tag reicht aus ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

Alle diese Vorschläge eignen sich hervorragend für verschiedene Situationen. Für diejenigen, die diese Seite über eine Suche finden, kann man dies auch ausprobieren. JQuery, kein Plug-In, scrollen Sie zum Element.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

glatte Schriftrolle, reines Javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Bearbeiten:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);

Eine andere Möglichkeit, mit dem oberen und linken Rand zu scrollen:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

in html

<a href="#top">go top</a>

Wirklich seltsam: Diese Frage ist seit fünf Jahren aktiv und es gibt immer noch keine Vanille-JavaScript-Antwort, um das Scrollen zu animieren. Also los geht's:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

Wenn Sie möchten, können Sie dies in eine Funktion einbinden und über das onclickAttribut aufrufen . Überprüfen Sie diese jsfiddle

Hinweis: Dies ist eine sehr einfache Lösung und möglicherweise nicht die leistungsstärkste. Ein sehr ausführliches Beispiel finden Sie hier: https://github.com/cferdinandi/smooth-scroll

Wenn Sie reibungslos scrollen möchten, versuchen Sie Folgendes:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

Eine andere Lösung ist die JavaScript-Methode window.scrollTo:

 window.scrollTo(x-value, y-value);

Parameter:

• Der x-Wert ist das Pixel entlang der horizontalen Achse.
• Der y-Wert ist das Pixel entlang der vertikalen Achse.

Mit window.scrollTo(0, 0);ist sehr schnell,
also habe ich das Mark Ursino-Beispiel ausprobiert, aber in Chrome passiert nichts
und ich habe dies gefunden

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

Ich habe alle 3 Browser getestet und es funktioniert. Ich verwende Blueprint-CSS.
Wenn ein Kunde auf die Schaltfläche "Jetzt buchen" klickt und die Mietdauer nicht ausgewählt ist, bewegt er sich langsam an die Spitze der Kalender und öffnet einen Dialog, auf den div zeigt die 2 Felder, nach 3 Sekunden wird es ausgeblendet

Eine Menge von Benutzern empfiehlt die Auswahl sowohl die HTML - und Body - Tags für Cross-Browser - Kompatibilität, etwa so:

$('html, body').animate({ scrollTop: 0 }, callback);

Dies kann Sie jedoch stören, wenn Sie darauf zählen, dass Ihr Rückruf nur einmal ausgeführt wird. Es wird tatsächlich zweimal ausgeführt, da Sie zwei Elemente ausgewählt haben.

Wenn das ein Problem für Sie ist, können Sie Folgendes tun:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

Der Grund dafür ist, dass in Chrome $('html').scrollTop()0 zurückgegeben wird, in anderen Browsern wie Firefox jedoch nicht.

Wenn Sie nicht warten möchten, bis die Animation abgeschlossen ist, falls sich die Bildlaufleiste bereits oben befindet, versuchen Sie Folgendes:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}

Der Alte #topkann den Trick machen

document.location.href = "#top";

Funktioniert gut in FF, IE und Chrome

Versuche dies

<script>
    $(window).scrollTop(100);
</script>

$(document).scrollTop(0); funktioniert auch.

Nicht-jQuery-Lösung / reines JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;

Das wird funktionieren:

window.scrollTo(0, 0);

Versuchen Sie diesen Code:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom Element, in das Sie den Bildlauf verschieben möchten.

Zeit => Millisekunden, definieren Sie die Geschwindigkeit des Bildlaufs.

Reine JavaScript-Lösung:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

Ich schreibe eine animierte Lösung auf Codepen

Sie können auch eine andere Lösung mit CSS- scroll-behavior: smoothEigenschaft ausprobieren .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Warum verwenden Sie nicht die in JQuery integrierte Funktion scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

Kurz und einfach!

Sie brauchen JQuery nicht. Sie können einfach das Skript aufrufen

window.location = '#'

Klicken Sie auf die Schaltfläche "Nach oben"

Beispieldemo:

output.jsbin.com/fakumo#

PS: Verwenden Sie diesen Ansatz nicht, wenn Sie moderne Bibliotheken wie anglejs verwenden. Das könnte den URL-Hashbang kaputt machen.

Verwenden Sie einfach dieses Skript, um direkt nach oben zu scrollen.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>

Wenn Sie keinen reibungslosen Bildlauf wünschen, können Sie die Animation für den reibungslosen Bildlauf betrügen und stoppen, sobald Sie sie starten ... wie folgt:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Ich habe keine Ahnung, ob es empfohlen / erlaubt ist, aber es funktioniert :)

Wann würden Sie dies verwenden? Ich bin mir nicht sicher, aber vielleicht, wenn Sie einen Klick verwenden möchten, um eine Sache mit Jquery zu animieren, aber eine andere ohne Animation? Öffnen Sie also oben auf der Seite ein Anmelde-Admin-Anmeldefenster und springen Sie sofort nach oben, um es anzuzeigen.

Motivation

Diese einfache Lösung funktioniert nativ und implementiert einen reibungslosen Bildlauf zu einer beliebigen Position.

Es wird vermieden, Ankerlinks (solche mit #) zu verwenden, die meiner Meinung nach nützlich sind, wenn Sie auf einen Abschnitt verlinken möchten, aber in einigen Situationen nicht so komfortabel sind, insbesondere wenn Sie nach oben zeigen, was dazu führen kann, dass zwei verschiedene URLs auf die verweisen gleicher Ort ( http://www.example.org und http://www.example.org/# ).

Lösung

Fügen Sie dem Tag, zu dem Sie scrollen möchten, eine ID hinzu , z. B. Ihrem ersten Abschnitt , in dem diese Frage beantwortet wird. Die ID kann jedoch überall auf der Seite platziert werden.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Dann können Sie als Schaltfläche einen Link verwenden. Bearbeiten Sie einfach das onclick- Attribut mit einem Code wie diesem.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

Wobei das Argument von document.getElementByIddie ID des Tags ist, zu dem Sie nach dem Klicken scrollen möchten.

Sie können einfach ein Ziel aus Ihrem Link verwenden, z. B. #someid, wobei #someid die ID des Divs ist.

Sie können auch eine beliebige Anzahl von Bildlauf-Plugins verwenden, die dies eleganter machen.

http://plugins.jquery.com/project/ScrollTo ist ein Beispiel.

Sie können versuchen, JS wie in dieser Geige zu verwenden http://jsfiddle.net/5bNmH/1/

Fügen Sie die Schaltfläche "Nach oben" in Ihre Seitenfußzeile ein:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>

function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}

Keine der oben genannten Antworten funktioniert in SharePoint 2016.

Dies muss folgendermaßen erfolgen: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;