Otomatik Olarak Sayfanın Altına Git

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

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

Peki, bana bu sorunun cevabını bulabileceğim bazı belgeler veya bazı bağlantılar verebilir misiniz?

DÜZENLE: Sayfanın altındaki belirli bir HTML öğesine gitmeniz gerekiyor

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

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

Yuvalanmış öğelerinizin olduğ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 onclicksorunuzun olayına bağlayabilirsiniz (örn. <div onclick="ScrollToBottom()" ...).

Göz atabileceğiniz bazı ek kaynaklar:

• http://www.sourcetricks.com/2010/07/javascript-scroll-to-bottom-of-page.html
• http://www.alecjacobson.com/weblog/?p=753
• http://www.mediacollege.com/internet/javascript/page/scroll.html
• http://www.electrictoolbox.com/jquery-scroll-bottom/

Tüm sayfayı alta kaydırmak istiyorsanız:

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

Üzerindeki örneğe bakın JSFiddle

Bir öğeyi alta kaydırmak istiyorsanız:

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

İşte böyle çalışır:

Ref: scrollTop , scrollHeight , clientHeight

GÜNCELLEME: Chrome'un son sürümleri (61+) ve Firefox vücudun kaydırılmasını desteklemez, bkz. Https://dev.opera.com/articles/fixing-the-scrolltop-bug/

Vanilla JS uygulaması:

element.scrollIntoView(false);

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

Sayfayı bir animasyon biçiminde aşağı gitmek için bunu kullanabilirsiniz.

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

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

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 için

Bazen sayfa aşağı kaydırmak için uzanır (örneğin sosyal ağlarda), sonuna kadar aşağı kaydırmak için (sayfanın nihai alt kısmı) Bu komut dosyasını kullanıyorum:

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

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

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

Ve sonra kullan stopScroll(); .

Belirli bir öğeye ilerlemeniz gerekiyorsa, şunları kullanın:

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

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

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

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

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ürler

alta düzgün kaydırmak için bir astar

window.scrollTo({ left: 0, top: document.body.scrollHeight, behavior: "smooth" });

Yukarı kaydırmak topiçin0

Bağlantı öğesinin idbaşvuru niteliğine herhangi birini ekleyebilirsiniz href:

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

Yukarıdaki örnekte, kullanıcı Click mesayfanın altını tıkladığında gezinme Click mekendi kendine gezinir .

Nazik Çapaları deneyebilirsiniz güzel bir javascript eklentisi .

Misal:

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

Test Edilen Uyumluluk:

• Mac Firefox, Safari, Opera
• Windows Firefox, Opera, Safari, Internet Explorer 5.55+
• Linux test edilmedi, ancak en azından Firefox ile iyi olmalı

Partiye geç, ancak herhangi bir öğeyi alta kaydırmak için bazı basit javascript kodu :

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

Selenium'da aşağı kaydırmak için aşağıdaki kodu kullanın:

Alt aşağı açılana kadar sayfanın yüksekliğine kadar kaydırın. Hem JavaScript hem de React için iyi çalışacak 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)", "");

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

jQuery

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

veya sadece js

    window.scrollTo(0,9999);

İş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)

Bu, aşağı kaydırmayı garanti eder

Kafa Kodları

<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript" type="text/javascript">
function scrollToBottom() {
  $('#html, body').scrollTop($('#html, body')[0].scrollHeight);
}
</script>

Vücut kodu

<a href="javascript:void(0);" onmouseover="scrollToBottom();" title="Scroll to Bottom">&#9660; Bottom &#9660;</a>

Bir resim bin kelime değerinde bir olup:

Anahtar:

document.documentElement.scrollTo({
  left: 0,
  top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
  behavior: 'smooth'
});

Öğe document.documentElementolan kullanıyor <html>. Bu sadece kullanmak gibidir window, ancak tüm sayfayı değil ama bir kap, bu değiştirmek dışındaherhangi sadece bu gibi çalışır çünkü eğer o, bu şekilde bunu yapmak için sadece benim kişisel tercihi olduğunu document.bodyve document.documentElementhiç document.querySelector("#container-id").

Misal:

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

  document.documentElement.scrollTo({
    left: 0,
    top: document.documentElement.scrollHeight - document.documentElement.clientHeight,
    behavior: 'smooth'
  });

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Hiçbir fark yoksa farkı karşılaştırabilirsiniz scrollTo():

let cLines = 0;

let timerID = setInterval(function() {
  let elSomeContent = document.createElement("div");

  if (++cLines > 33) {
    clearInterval(timerID);
    elSomeContent.innerText = "That's all folks!";
  } else {
    elSomeContent.innerText = new Date().toLocaleDateString("en", {
      dateStyle: "long",
      timeStyle: "medium"
    });
  }
  document.body.appendChild(elSomeContent);

}, 1000);

body {
  font: 27px Arial, sans-serif;
  background: #ffc;
  color: #333;
}

Belirli bir öğeyi aşağı kaydırmak istiyorsanız 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>

Dinamik içeriğe sahip Açısal bir uygulamam var ve yukarıdaki cevapların birkaçını çok fazla başarıyla denemedim. @ Konard'ın cevabını uyarladım ve senaryom için düz JS'de çalıştırdım:

HTML

<div id="app">
    <button onClick="scrollToBottom()">Scroll to Bottom</button>
    <div class="row">
        <div class="col-md-4">
            <br>
            <h4>Details for Customer 1</h4>
            <hr>
            <!-- sequence Id -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="ID">
            </div>
            <!-- name -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Name">
            </div>
            <!-- description -->
            <div class="form-group">
                <textarea type="text" style="min-height: 100px" placeholder="Description" ></textarea>
            </div>
            <!-- address -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Address">
            </div>
            <!-- postcode -->
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Postcode">
            </div>
            <!-- Image -->
            <div class="form-group">
                <img style="width: 100%; height: 300px;">
                <div class="custom-file mt-3">
                    <label class="custom-file-label">{{'Choose file...'}}</label>
                </div>
            </div>
            <!-- Delete button -->
            <div class="form-group">
                <hr>
                <div class="row">
                    <div class="col">
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to save">Save</button>
                        <button class="btn btn-success btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to update">Update</button>
                    </div>
                    <div class="col">
                        <button class="btn btn-danger btn-block" data-toggle="tooltip" data-placement="bottom" title="Click to remove">Remove</button>
                    </div>
                </div>
                <hr>
            </div>
        </div>
    </div>
</div>

CSS

body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
}

#app {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    transition: all 0.2s;
}

JS

function scrollToBottom() {
    scrollInterval;
    stopScroll;

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

    var stopScroll = setInterval(function () {
        clearInterval(scrollInterval);
    }, 100);
}

En son Chrome, FF, Edge ve stok Android tarayıcısında test edildi. İşte bir keman:

https://jsfiddle.net/cbruen1/18cta9gd/16/

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

window.scrollTo (0,1e10);

her zaman çalışır.

1e10 büyük bir sayıdır. bu yüzden her zaman sayfanın sonu.

Açısal arayan herhangi biri

aşağı kaydırmanız yeterlidir bunu div'inize ekleyin

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>