Przewiń do góry strony za pomocą JavaScript?

1592

Jak przewinąć do góry strony za pomocą JavaScript? Jest to pożądane, nawet jeśli pasek przewijania natychmiast przeskakuje na górę. Nie szukam płynnego przewijania.

KingNestor
źródło
2019, aby uniknąć „Ta witryna wydaje się używać efektu pozycjonowania z przewijaniem. To może nie działać dobrze z asynchronicznym przesuwaniem ”użyj mojego skryptu stackoverflow.com/a/57641938/5781320
Constantin

Odpowiedzi:

2170

Jeśli nie potrzebujesz zmiany do animacji, nie musisz używać żadnych specjalnych wtyczek - po prostu użyję natywnego okna JavaScript. ScrollTo - przekazanie 0,0 spowoduje natychmiastowe przewinięcie strony w lewy górny róg .

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

Parametry

  • Współrzędna x to piksel wzdłuż osi poziomej.
  • Współrzędna y to piksel wzdłuż osi pionowej.
daniellmb
źródło
176
O to mi chodziło, jeśli nie potrzebujesz animować płynnego przewijania, nie musisz używać jQuery.
daniellmb
22
Zabawne, ponieważ komentarz Jeffa jest szczery dla osób, które po prostu chcą, aby coś działało w różnych przeglądarkach, 95% czasu powinno po prostu używać jQuery. To pochodzi od kogoś, kto musi teraz napisać dużo czystego javascript, ponieważ nie możemy sobie pozwolić na narzut biblioteki spowalniającej kod reklamy :(
Will
11
Ta odpowiedź nie ma nic wspólnego z pytaniem. Byłoby dobrze, gdyby pytanie brzmiało: jakiego skryptu i metod należy użyć, aby przewinąć na górę strony? Prawidłowa odpowiedź znajduje się tutaj: stackoverflow.com/questions/4147112/…
skobaljic
2
Pracuje dla mnie w Firefox 40 i Chrome 44 (aby odpowiedzieć na komentarz Michaiła)
Tony
10
Przewiń na dół stronywindow.scrollTo(0, document.body.scrollHeight);
emix
1343

Jeśli chcesz płynne przewijanie, spróbuj czegoś takiego:

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

Spowoduje to zabranie dowolnego <a>znacznika href="#top"i sprawi, że będzie płynnie przewijać do góry.

Mark Ursino
źródło
+1. Zastanawiałem się, jak to zrobić, i Google mnie tu zaprowadzi. PYTANIE: gdzie jest funkcja „scrollTop” w dokumentacji? Właśnie spojrzałem, ale nie mogłem go znaleźć.
sqram
22
scrollTop nie jest funkcją, jest własnością elementu okna
Jalal El-Shaer
1
To nie działa poprawnie, gdy używasz pełnego wywołania zwrotnego programu animate, ponieważ uruchomi go dwa razy.
David Morales
5
„html” i „body” są wymagane do kompatybilności przeglądarki, tzn. Chrome v27 przewija się z „body”, a IE8 nie. IE8 przewija się po prostu „html”, ale Chrome v27 nie.
SushiGuy
1
@jalchr Właściwie window.pageYOffsetbyłby własnością obiektu e̶l̶e̶m̶e̶n̶t̶ okna.
Alex W
176

Spróbuj przewinąć na górze

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
mehmood
źródło
to jest to samo: if ('scrollRestoration' in history) {history.scrollRestoration = 'manual'; }
Vasilii Suricov,
123

Lepsze rozwiązanie z płynną animacją:

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

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

Ganesh Ghalame
źródło
Nadal może być konieczne włączenie obsługi wielu filtrów ScrollOptions(dla niektórych przeglądarek): github.com/iamdustan/smoothscroll
jneuendorf
Bardzo podoba mi się to rozwiązanie.
SuperManEver,
Czy ktoś może to przetestować w przeglądarce Safari lub Internet Explorer i sprawdzić, czy działa dobrze? Dzięki
Fabio Magarelli
1
@FabioMagarelli Działa dobrze w Safari, nie testowany w IE. Do przetestowania na safari należy otworzyć dowolną stronę, która ma przewijanie i skopiować, wkleić powyższy kod w Narzędziach programisty -> Konsola przewinie do góry zweryfikowana (Safari wersja 13.0.5).
Ganesh Ghalame
104

Aby to zrobić, nie potrzebujesz jQuery. Wystarczy standardowy tag HTML ...

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

<a target="#jump_to_me">Click Here To Destroy The World!</a>
Mathew
źródło
12
+1 Jest to dobre, jeśli chcesz przejść do określonego elementu, a nie tylko na górę.
Ish
38
Użyj „<a href="#"> Góra </a>”, aby przejść na górę strony.
Bakanekobrain
3
Wydaje się, że jest to najlepsza droga w przypadku SPA
Phil
Miły! Czy istnieje sposób na płynne przewijanie?
przeciągnięcie
65

Wszystkie te sugestie sprawdzają się doskonale w różnych sytuacjach. Dla tych, którzy znaleźli tę stronę poprzez wyszukiwania, można również dać to spróbować. JQuery, brak wtyczki, przewiń do elementu.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);
D.Alexander
źródło
47

płynne przewijanie, czysty javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();
wake-up-neo
źródło
31
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Edytować:

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

Kolejny sposób przewijania z górnym i lewym marginesem:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });
Kamlesh
źródło
4
Czy na pewno masz czas trwania, ponieważ ciąg znaków w funkcji animacji działa?
jogurt
Nie można używać ciągu w czasie trwania animatefunkcji, zamiast tego należy użyć: $('html, body').animate({scrollTop:(scroll_pos)}, 2000);
Kenny Alvizuris,
1
Po co zawijać 0 w nawiasie? ((0)) po prostu wyniesie 0
Jack Vial
Tak, Jack, możesz.
Kamlesh
29
<script>

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

w html

<a href="#top">go top</a>
hasancse016
źródło
28

Naprawdę dziwne: to pytanie jest aktywne od pięciu lat i nadal nie ma waniliowej odpowiedzi JavaScript na animację przewijania… Więc proszę:

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)

Jeśli chcesz, możesz zawinąć to w funkcję i wywołać to za pomocą onclickatrybutu. Sprawdź to jsfiddle

Uwaga: jest to bardzo podstawowe rozwiązanie, a może nie najskuteczniejsze. Bardzo rozbudowany przykład można znaleźć tutaj: https://github.com/cferdinandi/smooth-scroll

AvL
źródło
6
Pytanie wyraźnie dotyczy jednak rozwiązania jQuery. więc nie jest dziwne
Czy
2
Najlepsze rozwiązanie dla mnie. Bez wtyczek, bez obszernej biblioteki jquery po prostu prosty JavaScript. Kudos
2840467
Człowieku, stworzyłem również tę samą logikę XD po 5 latach, dokładnie tę samą logikę, tylko wartości są różne, takie jak przedział czasu i ta liczba całkowita, której używamy do odejmowania, nie mogą uwierzyć XD. TBH, przyszedłem tutaj, aby odpowiedzieć, ale już tam jest, więc głosowałem na twoją odpowiedź.
Germa Vinsmoke
27

Jeśli chcesz płynnie przewijać, spróbuj tego:

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

Innym rozwiązaniem jest metoda JavaScript window.scrollTo:

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

Parametry:

  • Wartość x to piksel wzdłuż osi poziomej.
  • Wartość y to piksel wzdłuż osi pionowej.
Gaurang Sondagar
źródło
7
naśladowca ... zobacz odpowiedzi użytkowników ... To tylko kompilacja 2 najlepszych odpowiedzi ....
Laurent B
jest to uzasadniony sposób na użycie przepływu stosu - bardziej praktyczne jest posiadanie go w jednym miejscu. Joel Spolsky wykorzystał ponowne wykorzystanie istniejących odpowiedzi jako przykład tego, w jaki sposób ma działać przepełnienie stosu w jednym punkcie. Jeśli jesteś zainteresowany, mogę spróbować znaleźć post na blogu
Edgar H
26

Z window.scrollTo(0, 0);jest bardzo szybki,
więc wypróbowałem przykład Marka Ursino, ale w Chrome nic się nie dzieje
i znalazłem to

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

przetestowałem wszystkie 3 przeglądarki i działa,
używam blueprint css,
gdy klient kliknie przycisk „Zarezerwuj teraz” i nie ma wybranego okresu wynajmu, powoli przechodzi na górę, gdzie znajdują się kalendarze, i otwiera okno dialogowe wskazujące na 2 pola, po 3 sekundach zanika

Luiggi ZAMOL
źródło
Dziękujemy za wskazanie, że musisz kierować zarówno na HTML, jak i na ciało. Robiłem to tylko dla html i zastanawiałem się, dlaczego to nie działa w Chrome.
Jared
Animacja ciała działa w Safari, więc odpowiednio aktualizuję twoją odpowiedź.
Dave DuPlantis,
46
„Testowałeś wszystkie 3 przeglądarki ”? Midori, LuaKit i Konqueror, prawda? : p
Anko
14
Dlaczego po prostu nie wykonać $ („html”, „body”). Animować ({scrollTop: 0}) zamiast dodawać dwie linie?
Matt Smith,
23

Dużo od użytkowników zalecamy wybranie zarówno HTML i ciała tagi dla kompatybilności z różnymi przeglądarkami, tak jak poniżej:

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

Może to Cię jednak potknąć, jeśli liczysz, że oddzwonienie uruchomi się tylko raz. W rzeczywistości będzie działał dwukrotnie, ponieważ wybrałeś dwa elementy.

Jeśli jest to dla Ciebie problem, możesz zrobić coś takiego:

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

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

Powodem tego jest to, że Chrome $('html').scrollTop()zwraca 0, ale nie w innych przeglądarkach, takich jak Firefox.

Jeśli nie chcesz czekać na zakończenie animacji w przypadku, gdy pasek przewijania znajduje się już u góry, spróbuj tego:

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

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

    callback();
}
Big McLargeHuge
źródło
19

Stare #topmogą załatwić sprawę

document.location.href = "#top";

Działa dobrze w FF, IE i Chrome

pollirrata
źródło
Miły! Czy istnieje sposób na płynne przewijanie?
przeciągnięcie
powinieneś unikać rozwiązań nawigacyjnych, patrz komentarze do odpowiedzi Sriramajeyam.
Andrew Grothe,
15

$(".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>

arvinda kumar
źródło
3
Chociaż ten kod może odpowiedzieć na pytanie, podanie informacji o tym, jak i dlaczego rozwiązuje problem, poprawia jego długoterminową wartość
L_J
Wyjaśnij swoją odpowiedź!
Ullas Hunka
Na stronie internetowej każdy użytkownik kliknie przycisk przewijania do góry, a następnie strona przewinie do góry z animacją.
arvinda kumar
Dlaczego animacja () zamiast jquery scroll ()?
Akin Hwan
14

Spróbuj tego

<script>
    $(window).scrollTop(100);
</script>
Renjith
źródło
14

$(document).scrollTop(0); działa również.

Hari Ganesan
źródło
2
Pamiętaj, że jeśli nie używasz przeglądarki Firefox, to nie zadziała. Błąd pojawia się przy podawaniu tylko jednego argumentu (Błąd: za mało argumentów [nsIDOMWindow.scrollTo]).
Husky,
14

Rozwiązanie inne niż jQuery / czysty JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;
tfont
źródło
14

To zadziała:

window.scrollTo(0, 0);

Santosh Jadi
źródło
3
To była najlepsza odpowiedź
OG Sean
10

Wypróbuj ten kod:

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

div => Dom Element, w którym chcesz przenieść przewiń.

czas => milisekundy, określ szybkość przewijania.

Wasif Ali
źródło
8

Dlaczego nie używasz wbudowanej funkcji JQuery scrollTop:

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

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

Krótko i prosto!

Sandeep Gantait
źródło
Brakuje tylko linku do dokumentu
Cyryla Duchona-Dorisa,
8

Nie potrzebujesz JQuery. Po prostu możesz wywołać skrypt

window.location = '#'

po kliknięciu przycisku „Idź na górę”

Przykładowe demo:

output.jsbin.com/fakumo#

PS: Nie używaj tego podejścia, gdy korzystasz z nowoczesnych bibliotek, takich jak angularjs. To może zepsuć mieszanie adresów URL.

Sriramajeyam Sugumaran
źródło
9
Niestety nie jest to najlepsze rozwiązanie, ponieważ fizycznie zmieniasz lokalizację zamiast przewijać stronę. Może to powodować problemy, jeśli lokalizacja jest ważna (w przypadku korzystania z routingu kątowego lub mniej więcej)
Jarosław Rogoza,
2
@YaroslavRogoza jest poprawny. Chociaż może to działać w prostych przypadkach, nie poleciłbym tego rozwiązania. Lokalizacja staje się coraz ważniejsza, a aplikacje jednostronicowe intensywnie używają skrótu do obsługi nawigacji. Natychmiast wprowadziłbyś błąd związany z efektem ubocznym, gdy dodawałeś nawigację opartą na haszowaniu po tym lub tym do nawigacji opartej na haszu.
Andrew Grothe
8

Po prostu użyj tego skryptu, aby przewinąć do góry bezpośrednio.

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

Rozwiązanie Pure JavaScript:

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

Piszę animowane rozwiązanie na Codepen

Możesz także wypróbować inne rozwiązanie z scroll-behavior: smoothwłaściwością CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
Saeed Hassanvand
źródło
7

Jeśli nie chcesz płynnego przewijania, możesz oszukiwać i zatrzymywać płynne przewijanie animacji niemal natychmiast po uruchomieniu ... tak:

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

Nie mam pojęcia, czy jest to zalecane / dozwolone, ale działa :)

Kiedy tego użyjesz? Nie jestem pewien, ale może kiedy chcesz użyć jednego kliknięcia do animacji jednej rzeczy za pomocą Jquery, ale zrobić inną bez animacji? tzn. otwórz wsuwany panel logowania administratora u góry strony i od razu przeskocz na górę, aby go zobaczyć.

Jon Story
źródło
6

Motywacja

To proste rozwiązanie działa natywnie i zapewnia płynne przewijanie do dowolnej pozycji.

Unika używania linków zakotwiczonych (tych z #), które moim zdaniem są przydatne, jeśli chcesz utworzyć link do sekcji, ale w niektórych sytuacjach nie są tak wygodne, szczególnie gdy wskazuje się na górę, co może prowadzić do dwóch różnych adresów URL wskazujących na ta sama lokalizacja ( http://www.example.org i http://www.example.org/# ).

Rozwiązanie

Umieść identyfikator w tagu, do którego chcesz przewinąć, na przykład w pierwszej sekcji , która odpowiada na to pytanie, ale identyfikator można umieścić wszędzie na stronie.

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

Następnie jako przycisk możesz użyć linku, po prostu edytuj atrybut onclick za pomocą takiego kodu.

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

Gdzie argumentem document.getElementByIdjest identyfikator znacznika, który chcesz przewinąć po kliknięciu.

Gianluca Casati
źródło
Dzięki Ci! to świetne rozwiązanie
Hugo Stiven Laguna Rueda
@ HugoStivenLagunaRueda nie ma za co, znalazłem go w MDN, więc dzięki Mozilli. To niesamowite, ile rzeczy już tam jest, obsługiwanych natywnie. Uwielbiam waniliowy JS.
Gianluca Casati
5

Możesz po prostu użyć celu z linku, takiego jak #someid, gdzie #someid jest identyfikatorem div.

Możesz też użyć dowolnej liczby przewijanych wtyczek, które uczynią to bardziej eleganckim.

http://plugins.jquery.com/project/ScrollTo jest przykładem.

ScottE
źródło
4

Możesz spróbować użyć JS jak w tym Fiddle http://jsfiddle.net/5bNmH/1/

Dodaj przycisk „Idź na górę” w stopce strony:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>
asertym
źródło
4
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;
    });
}
Mardzis
źródło
4

Żadna z powyższych odpowiedzi nie będzie działać w programie SharePoint 2016.

Należy to zrobić w następujący sposób: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
jeancallisti
źródło