web-gelistirme-sc.com

Otomatik Olarak Sayfanın Altına Kaydır

Bir soru listem var. İlk soruya tıkladığımda, beni otomatik olarak sayfanın altına götürmeli. 

Aslında, bunun jQuery kullanılarak yapılabileceğini biliyorum. 

Öyleyse, bana bu belgeye cevap bulabileceğim bazı belgeler veya bağlantılar verebilir misiniz?

EDIT: Sayfanın altındaki belirli bir HTML element 'e kaydırmanız gerekir

291
jat

jQuery gerekli değildir. Bir Google aramasından aldığım en iyi sonuçların çoğu bana şu cevabı verdi:

window.scrollTo(0,document.body.scrollHeight);

İç içe geçmiş öğelerin bulunduğu yerde belge kaydırılmayabilir. Bu durumda, kayan öğeyi hedeflemeniz ve bunun yerine kaydırma yüksekliğini kullanmanız gerekir. 

window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);

Bunu, sorunuzun onclick olayına bağlayabilirsiniz (ör. <div onclick="ScrollToBottom()" ...__). 

Bir göz atabileceğiniz bazı ek kaynaklar:

598
Zhihao

Tüm sayfayı aşağı kaydırmak istiyorsanız:

var scrollingElement = (document.scrollingElement || document.body);
scrollingElement.scrollTop = scrollingElement.scrollHeight;

JSFiddle örneklerine bakınız.

Bir elemanı aşağıya kaydırmak istiyorsanız:

function gotoBottom(id){
   var element = document.getElementById(id);
   element.scrollTop = element.scrollHeight - element.clientHeight;
}

Ve bu şekilde çalışır:

enter image description here

Ref: scrollTop , scrollHeight , clientHeight

UPDATE: Chrome (61+) ve Firefox’un son sürümleri, gövdenin kaydırılmasını desteklemez, bkz: https : //dev.opera.com/articles/fixing-the-scrolltop-bug/

83
Tho

Vanilla JS uygulaması:

element.scrollIntoView(false);

https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView

39
shmuli

Sayfayı bir animasyon biçiminde aşağıya kaydırmak için bunu kullanabilirsiniz.

$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
20
user5978325

Çapraz tarayıcı çözümü aşağıda olmalıdır. Chrome, Firefox, Safari ve IE11’de test edilmiştir

window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);

window.scrollTo (0, document.body.scrollHeight); Firefox'ta çalışmıyor, en azından Firefox 37.0.2'de çalışmıyor.

15
PixelsTech

Bu işlevi çağırmanız gereken her yerde kullanabilirsiniz:

function scroll_to(div){
   if (div.scrollTop < div.scrollHeight - div.clientHeight)
        div.scrollTop += 10; // move down

}

jquery.com: ScrollTo

12
NrNazifi

bunu animasyonla da yapabilirsiniz, çok basit 

$('html, body').animate({
   scrollTop: $('footer').offset().top
   //scrollTop: $('#your-id').offset().top
   //scrollTop: $('.your-class').offset().top
}, 'slow');

umut yardımcı olur, teşekkür ederim

10
Ricardo Vieira

Bazen sayfa kaydırma sonuna kadar uzanır (örneğin, sosyal ağlarda), sonuna kadar kaydırmak için (sayfanın en altında kalanı)

var scrollInterval = setInterval(function() { 
    document.body.scrollTop = document.body.scrollHeight;
}, 50);

Tarayıcınızın javascript konsolundaysanız, kaydırmayı durdurabilmek yararlı olabilir, bu nedenle şunu ekleyin:

var stopScroll = function() { clearInterval(scrollInterval); };

Ve sonra stopScroll(); kullanın.

Belirli bir öğeye kaydırmanız gerekirse, şunları kullanın:

var element = document.querySelector(".element-selector");
element.scrollIntoView();

Veya belirli bir öğeye otomatik kaydırma yapmak için evrensel komut dosyası (veya sayfa kaydırma aralığını durdurma):

var notChangedStepsCount = 0;
var scrollInterval = setInterval(function() {
    var element = document.querySelector(".element-selector");
    if (element) { 
        // element found
        clearInterval(scrollInterval);
        element.scrollIntoView();
    } else if((document.body.scrollTop + window.innerHeight) != document.body.scrollHeight) { 
        // no element -> scrolling
        notChangedStepsCount = 0;
        document.body.scrollTop = document.body.scrollHeight;
    } else if (notChangedStepsCount > 20) { 
        // no more space to scroll
        clearInterval(scrollInterval);
    } else {
        // waiting for possible extension (autoload) of the page
        notChangedStepsCount++;
    }
}, 50);
8
Konard

Nazik Çapa a Güzel bir javascript eklentisi deneyebilirsiniz.

Örnek:

function SomeFunction() {
  // your code
  // Pass an id attribute to scroll to. The # is required
  Gentle_Anchors.Setup('#destination');
  // maybe some more code
}

Uyumluluk Test edildi:

  • Mac Firefox, Safari, Opera
  • Windows Firefox, Opera, Safari, Internet Explorer 5.55+
  • Linux denenmemiş ancak en azından Firefox’la iyi olmalı
4
Ahsan Khurshid

Bağlantı öğesinin id özniteliğine başvuru için href ekleyebilirsiniz.

<a href="#myLink" id="myLink">
    Click me
</a>

Kullanıcı, sayfanın altındaki Click me öğesini tıkladığında yukarıdaki örnekte, gezinme Click me öğesine gider.

3
RegarBoy

İşte benim çözümüm:

 //**** scroll to bottom if at bottom

 function scrollbottom() {
    if (typeof(scr1)!='undefined') clearTimeout(scr1)   
    var scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    var scrollHeight = (document.documentElement && document.documentElement.scrollHeight) || document.body.scrollHeight;
    if((scrollTop + window.innerHeight) >= scrollHeight-50) window.scrollTo(0,scrollHeight+50)
    scr1=setTimeout(function(){scrollbottom()},200) 
 }
 scr1=setTimeout(function(){scrollbottom()},200)
3
Iamma Iamma

Partinin sonlarında, ancak işte any öğesini aşağıya kaydırmak için basit javascript kodları:

function scrollToBottom(e) {
  e.scrollTop = e.scrollHeight - e.getBoundingClientRect().height;
}
3
ShortFuse

Selenyum aşağı kaydırmak için aşağıdaki kodu kullanın:

Aşağıya açılana kadar, sayfanın en yüksek derecesine kadar kaydırın .. Hem JavaScript hem de React'te işe yarayan aşağıdaki javascript kodunu kullanın.

JavascriptExecutor jse = (JavascriptExecutor) driver; // (driver is your browser webdriver object) 
jse.executeScript("window.scrollBy(0,document.body.scrollHeight || document.documentElement.scrollHeight)", "");
2
Ankit Gupta

Çok basit bir yol

Aşağı kaydırmak istediğinizde bu işlevi çağırın.

function scrollDown() {
 document.getElementById('scroll').scrollTop =  document.getElementById('scroll').scrollHeight
}
ul{
 height: 100px;
 width: 200px;
 overflow-y: scroll;
 border: 1px solid #000;
}
<ul id='scroll'>
<li>Top Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Something Here</li>
<li>Bottom Here</li>
<li style="color: red">Bottom Here</li>
</ul>

<br />

<button onclick='scrollDown()'>Scroll Down</button>

1
Liam

Pek çok cevap belgenin yüksekliğini hesaplamaya çalışıyor. Ama benim için doğru bir şekilde hesaplanmıyordu. Ancak, her ikisi de çalıştı:

jQuery

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

ya da sadece js

    window.scrollTo(0,9999);
1
Andrew
getDocHeight: function() {
  var D = document;
  return Math.max(
    D.body.scrollHeight,
    D.documentElement.scrollHeight,
    D.body.offsetHeight,
    D.documentElement.offsetHeight,
    D.body.clientHeight,
    D.documentElement.clientHeight
  );
}

document.body.scrollTop = document.documentElement.scrollTop = this.getDocHeight();
0