Tarayıcı sayfasının üstüne nasıl atlanır

186

Kalıcı bir açılır pencere yazıyorum ve açık kalıcı düğmeye basıldığında ekranın üst kısmına atlamak için tarayıcıya ihtiyacım var. JQuery kullanarak tarayıcıyı yukarı kaydırmanın bir yolu var mı?

— Exitos
kaynak

405

Bunu şu şekilde ayarlayabilirsiniz scrollTop:

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

Veya zirveye oturmak yerine küçük bir animasyon istiyorsanız:

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

— Nick Craver
kaynak

1

iyi bir ... Bunu başarmak için daha önce jQuery için scrollTo eklentisini kullandım - kodunuzla biraz kod kaydedebilirdim ... ders için teşekkürler ;-)

— Zathrus Writer

@MikhailBatcer - CSS'nizi devre dışı bırakın ve ardından çalışıp çalışmadığına bakın. Etiketlerinizi htmlve stilinizi nasıl şekillendirdiğinizle ilgili bir sorununuz olabilir body. aksi takdirde kullanın $(window).

— 19'da

animasyon kaydırma için süre nasıl eklenir?

— Maxim Strutinskiy

139

Animasyon olmadan düz JS kullanabilirsiniz:

scroll(0,0)

Animasyon ile Nick'in cevabını kontrol edin .

— Ionuț Staicu
kaynak

4

Bu tüm tarayıcılarda destekleniyor mu?

— Pacerier

1

scrollCSSOM standardındadır scrollTo, orijinal olarak DOM Level 0'da tanımlanmıştır ve herhangi bir standardın parçası değildir. Ancak, CSSOM scrollTogeriye dönük uyumluluk içerir .

— Clint Pachl

3

Bence scrollyaygın olarak destekleniyor. Bkz. Stackoverflow.com/q/1925671/41906

— Clint Pachl

Teşekkürler. Sanırım window && window.scroll(0,0);benim görüş modelimde kabul edilebilir.

— nrodic

34

JQuery UI iletişim kutusunu kullanıyorsanız, yalnızca modda pencerede sabit konumla görünecek şekilde stil oluşturabilirsiniz, böylece görünümden çıkmaz ve kaydırma ihtiyacını ortadan kaldırır. Aksi takdirde,

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

hile yapmalı.

— Silkster
kaynak

13

Javascript olmadan yapabilir ve sadece çapa etiketleri kullanabilirsiniz? O zaman bu js ücretsiz erişilebilir.

modals kullanırken, ben js ücretsiz olmak umurumda değil varsayalım. ;)

— S.Kiers
kaynak

1

Bağlantı etiketlerinin kullanılması karma tabanlı gezinmeyi kesintiye uğratacaktır.

— 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>

Snippet'i genişlet

— Waruna Manjula
kaynak

2

Bunun eski olduğunu biliyorum, ama Edge'de sorun yaşayanlar için:

Düz JS: window.scrollTop=0;

Ne yazık ki, scroll()ve scrollTo()Edge hataları atmak.

— Josh Powlison
kaynak

1

jQuery UI iletişim kutusunu kullanıyorsanız, yalnızca modda pencerede sabit konumla görünecek şekilde stil oluşturabilirsiniz, böylece kaydırma ihtiyacını ortadan kaldırarak görünümden çıkmaz. Diğer

— gary
kaynak

0

Saf Javascript çözümü

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

Düzgün kaydırma istiyorsanız

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })

— Moghazi
kaynak