Jak przejść na górę strony przeglądarki

186

Piszę okienko modalne i potrzebuję przeglądarki, aby przeskoczyła na górę ekranu po naciśnięciu przycisku Otwórz modal. Czy istnieje sposób przewijania przeglądarki do góry za pomocą jQuery?

javascript jquery css modal-dialog Exitos
źródło

Odpowiedzi:

405

Możesz ustawić scrollTop:

$('html,body').scrollTop(0);

Lub jeśli chcesz trochę animacji zamiast przystawki na górę:

$('html, body').animate({ scrollTop: 0 }, 'fast');
Nick Craver
źródło
1
dobrze ... Użyłem wcześniej wtyczki scrollTo do jQuery, aby to osiągnąć - mógłbym zaoszczędzić trochę kodu wraz z twoim kodem ... dzięki za lekcję ;-)
Zathrus Writer
@MikhailBatcer - wyłącz swój CSS, a następnie sprawdź, czy działa. Możesz mieć problem ze stylem tagów htmli bodytagów. w przeciwnym razie użyj $(window)zamiast tego.
wywołaj
jak dodać czas trwania przewijania animacji?
Maxim Strutinskiy,
139

Bez animacji możesz użyć zwykłego JS:

scroll(0,0)

Z animacją sprawdź odpowiedź Nicka .

Ionuț Staicu
źródło
4
Czy jest to obsługiwane we wszystkich przeglądarkach?
Pacerier
1
scrolljest w standardzie CSSOM, podczas gdy scrollTozostał pierwotnie zdefiniowany w DOM Level 0 i nie jest częścią żadnego standardu. Jednak CSSOM obejmuje scrollTokompatybilność wsteczną.
Clint Pachl
3
Myślę, że scrolljest szeroko wspierany. Zobacz stackoverflow.com/q/1925671/41906
Clint Pachl
Dzięki. Wydaje mi się, że window && window.scroll(0,0);jest akceptowalny w moim modelu widoku.
nrodic
34

Jeśli używasz okna dialogowego interfejsu użytkownika jQuery, możesz po prostu zaprojektować modal tak, aby pojawiał się z pozycją ustaloną w oknie, aby nie wyskakiwał z pola widzenia, eliminując potrzebę przewijania. Inaczej,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

powinien załatwić sprawę.

Silkster
źródło
13

Możesz to zrobić bez javascript i po prostu użyć tagów zakotwiczenia? Wtedy byłby dostępny dla tych js za darmo.

chociaż ponieważ używasz modałów, zakładam, że nie obchodzi cię to, że jesteś wolny. ;)

S.Kiers
źródło
1
Użycie tagów zakotwiczenia zakłóciłoby nawigację opartą na haszowaniu.
Tom Landau
2 

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
   
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
 
     $('html, body').animate({scrollTop:0}, 'slow');
}
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>
Rozwiń fragment kodu

Waruna Manjula
źródło
2

Wiem, że to stare, ale dla tych, którzy mają problemy z Edge:

Zwykły JS: window.scrollTop=0;

Niestety scroll()i scrollTo()wrzuć błędy w Edge.

Josh Powlison
źródło
1

używasz okna dialogowego interfejsu użytkownika jQuery, możesz po prostu zaprojektować modal tak, aby pojawiał się z pozycją ustaloną w oknie, aby nie wyskakiwał z pola widzenia, eliminując potrzebę przewijania. Inny

Gary
źródło
0

Rozwiązanie Pure JavaScript

theId.onclick = () => window.scrollTo(top: 0)

Jeśli chcesz płynne przewijanie 

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })
Moghazi
źródło