it-swarm.com.de

Mit JavaScript/jQuery zum Anfang der Seite scrollen?

Ich habe einen <button> auf der Seite, wenn diese Schaltfläche gedrückt wird, wird ein versteckter <div> mit jQuery angezeigt.

Wie scrolle ich mit einem JavaScript/jQuery-Befehl in dieser Funktion an den Anfang der Seite? Es ist auch wünschenswert, wenn die Bildlaufleiste sofort nach oben springt. Ich suche kein reibungsloses Scrollen.

1383
KingNestor

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

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. 
1894
daniellmb

Wenn Sie einen reibungslosen Bildlauf wünschen, versuchen Sie Folgendes:

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

Damit wird ein beliebiger <a>-Tag benötigt, dessen href="#top" zum glatten Bildlauf nach oben führt.

1250
Mark Ursino

Versuchen Sie, oben zu scrollen

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

Sie benötigen dazu nicht jQuery. 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>
92
Mathew

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

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

glattes Scrollen, reines Javascript:

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

Bessere Lösung mit reibungsloser 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

29
Ganesh Ghalame

Wenn Sie einen reibungslosen Bildlauf durchführen 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:

  • x-Wert ist das Pixel entlang der horizontalen Achse.
  • y-Wert ist das Pixel entlang der vertikalen Achse.
28
<script>

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

in HTML

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

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

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

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 den oberen Rand der Kalender und öffnet ein Dialogfenster, das auf die beiden Felder zeigt und nach 3 Sekunden ausgeblendet wird

24
Luiggi ZAMOL

Wirklich seltsam: Diese Frage ist jetzt seit fünf Jahren aktiv und es gibt immer noch keine Vanilla JavaScript-Antwort, um das Scrollen zu animieren.

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 einschließen und über das Attribut onclick aufrufen. Überprüfen Sie dies jsfiddle

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

23
AvL

A lotvonbenutzern empfiehlt, sowohl die html- als auch die body-Tags für die Browser-übergreifende Kompatibilität auszuwählen.

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

Dies kann Sie jedoch stolpern lassen, 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 dies 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, warum dies funktioniert, liegt in Chrome. $('html').scrollTop() gibt 0 zurück, aber nicht in anderen Browsern wie Firefox.

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();
}
22
David Kennedy

Der alte #top kann den Trick tun 

document.location.href = "#top";

Funktioniert gut in FF, IE und Chrome

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

Bearbeiten:

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

Versuche dies

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

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

14
Hari Ganesan

Nicht-jQuery-Lösung/reines JavaScript:

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

Das wird funktionieren:

window.scrollTo(0, 0);

10
Santosh Jadi

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 der Bildlauf.

10
Wasif Ali

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>

10
arvinda kumar

Warum verwenden Sie nicht die integrierte JQuery-Funktion scrollTop:

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

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

Kurz und einfach!

8
Sandeep Gantait

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

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

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

window.location = '#'

klicken Sie auf die Schaltfläche "Gehe 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 gebrochen haben.

Wenn Sie kein reibungsloses Scrollen wünschen, können Sie die Animation zum sanften Scrollen so schnell wie möglich überlisten und stoppen ...

   $(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ürdest du das benutzen? Ich bin 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 ein Admin-Anmeldefenster für Slide-Ins oben auf der Seite, und springen Sie sofort nach oben, um es anzuzeigen.

6
Jon Story

Motivation

Diese einfache Lösung arbeitet nativ und ermöglicht ein sanftes Scrollen in jede Position.

Es wird vermieden, Ankerlinks (solche mit #) zu verwenden, die meiner Meinung nach nützlich sind, wenn Sie mit einem Abschnitt verknüpfen möchten, in einigen Situationen jedoch nicht so komfortabel sind, insbesondere wenn Sie nach oben zeigen, was zu zwei verschiedenen URLs führen kann, auf die verwiesen wird am selben Ort (http://www.example.org und http://www.example.org/#).

Lösung

Fügen Sie dem Tag, zu dem Sie scrollen möchten, ein id hinzu, beispielsweise zu Ihrem ersten section, das diese Frage beantwortet. Das id kann jedoch überall auf der Seite platziert werden.

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

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

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

Das Argument von document.getElementById ist id des Tags, zu dem Sie nach dem Klicken einen Bildlauf durchführen möchten.

6
Gianluca Casati

Sie können einfach ein Ziel aus Ihrem Link verwenden, z. B. #someid.

Sie können auch eine beliebige Anzahl von Scrolling-Plugins verwenden, die das Ganze eleganter machen.

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

5
ScottE

Sie können JS wie in diesem Fiddle http://jsfiddle.net/5bNmH/1/ verwenden.

Fügen Sie die Schaltfläche "Nach oben" in die Fußzeile Ihrer Seite ein:

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

Keine der obigen Antworten funktioniert in SharePoint 2016.

Dies muss folgendermaßen geschehen: https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
jeancallisti
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;
    });
}
4
Mardzis

Aktiviere alle Browser. Viel Glück

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
3
Anh Tran

Versuche dies

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
Eugeni Bejan

Wenn Sie zu einem Element mit einer ID scrollen möchten, versuchen Sie Folgendes:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
2
Alan Kael Ball

Wenn der obere Bildlauf den oberen Bildlauf überschreitet, ist der untere und der obere Bildlauf nach oben als Kopfzeile begrenzt. Unten Siehe Fiddle Beispiel.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/

1
Musaib Memdu

document.getElementById("id of what you want to scroll to").scrollIntoView();

1
GameMaster1928

Einfach versuchen, kein anderes Plugin/Frameworks benötigen

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}
<button id="jarscroolbtn">Scroll contents</button> 
html, body {
  scroll-behavior: smooth;
}
0
rajmobiapp

Zum Blättern zu dem Element und Element, das sich oben auf der Seite befindet

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);
0
Priyanka

2019,

zu vermeiden “Diese Site scheint einen scrollgebundenen Positionierungseffekt zu verwenden. Dies funktioniert möglicherweise nicht mit asynchronem Schwenken. Verwenden Sie mein Skript

https://stackoverflow.com/a/57641938/578132

0
Constantin