Scroll Automatically to the Bottom of the Page

后端 未结 24 2497
佛祖请我去吃肉
佛祖请我去吃肉 2020-11-22 05:22

Consider I have a list of questions. When I click on the first question, it should automatically take me to the bottom of the page.

For a matter of fact, I do know

相关标签:
24条回答
  • 2020-11-22 05:58
    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 讨论(0)
  • 2020-11-22 05:59

    Here's my solution:

     //**** 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)
    
    0 讨论(0)
  • 2020-11-22 06:00

    I have an Angular app with dynamic content and I tried several of the above answers with not much success. I adapted @Konard's answer and got it working in plain JS for my scenario:

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

    Tested on the latest Chrome, FF, Edge, and stock Android browser. Here's a fiddle:

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

    0 讨论(0)
  • 2020-11-22 06:00

    I found a trick to make it happen.

    Put an input type text at the bottom of the page and call a jquery focus on it whenever you need to go at the bottom.

    Make it readonly and nice css to clear border and background.

    0 讨论(0)
  • 2020-11-22 06:01

    A picture is worth a thousand words:

    The key is:

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

    It is using document.documentElement, which is the <html> element. It is just like using window, but it is just my personal preference to do it this way, because if it is not the whole page but a container, it works just like this except you'd change document.body and document.documentElement to document.querySelector("#container-id").

    Example:

    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;
    }

    You can compare the difference if there is no 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;
    }

    0 讨论(0)
  • 2020-11-22 06:02

    you can do this too with animation, its very simple

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

    hope helps, thank you

    0 讨论(0)
提交回复
热议问题