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?

— Exitos
źródło

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