自动滚动到页面底部

时间：2012-07-30 05:03:11

标签： javascript jquery

考虑一下我有一系列问题。当我点击第一个问题时，它会自动将我带到页面底部。

事实上，我知道这可以使用jQuery完成。

那么，你能给我一些文件或一些链接，我可以找到这个问题的答案吗？

编辑：需要滚动到页面底部的特定HTML 元素

25 个答案:

答案 0 :(得分：649)

jQuery没有必要。我从谷歌搜索获得的大多数最佳结果给了我这个答案：

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

如果您有嵌套元素，则文档可能无法滚动。在这种情况下，您需要定位滚动的元素并使用它的滚动高度。

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

您可以将其与问题的onclick事件联系起来（即<div onclick="ScrollToBottom()" ...）。

您可以查看一些其他来源：

答案 1 :(得分：77)

如果要将整个页面滚动到底部：

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

请参阅JSFiddle

上的示例

如果要将元素滚动到底部：

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

这就是它的工作原理：

enter image description here

参考：scrollTop，scrollHeight，clientHeight

更新：最新版本的Chrome（61+）和Firefox不支持滚动正文，请参阅：https://dev.opera.com/articles/fixing-the-scrolltop-bug/

答案 2 :(得分：44)

Vanilla JS实施： 

element.scrollIntoView(false);

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

答案 3 :(得分：20)

您可以使用它以动画格式向下浏览页面。

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

答案 4 :(得分：17)

下面应该是跨浏览器解决方案。它已经在Chrome，Firefox，Safari和IE11上进行了测试

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

window.scrollTo（0，document.body.scrollHeight）;不适用于Firefox，至少对于Firefox 37.0.2

答案 5 :(得分：12)

您可以在需要的地方使用此功能：

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

}

jquery.com: ScrollTo

答案 6 :(得分：11)

你也可以用动画做到这一点，非常简单

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

希望有帮助， 谢谢

答案 7 :(得分：8)

有时页面会滚动到按钮（例如在社交网络中），向下滚动到结尾（页面的最终界限）我使用此脚本：

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

如果你在浏览器的javascript控制台中，能够停止滚动可能会很有用，所以添加：

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

然后使用stopScroll();。

如果您需要滚动到特定元素，请使用：

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

用于自动滚动到特定元素的通用脚本（或停止页面滚动间隔）：

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

答案 8 :(得分：4)

您可以尝试Gentle Anchors一个不错的javascript插件。

示例： 

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

兼容性测试：

  • Mac Firefox，Safari，Opera
  • Windows Firefox，Opera，Safari，Internet Explorer 5.55 +
  • Linux未经测试但至少应该使用Firefox

答案 9 :(得分：3)

这是我的解决方案：

 //**** 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)

答案 10 :(得分：3)

晚会，但这里有一些简单的仅限javascript的代码，可以将任意元素滚动到底部：

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

答案 11 :(得分：3)

您可以将任何id附加到链接元素的引用属性href：

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

在上面的示例中，当用户点击页面底部的Click me时，导航会导航到Click me本身。

答案 12 :(得分：3)

一个衬板可平滑滚动到底部

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

要向上滚动，只需将top设置为0

答案 13 :(得分：2)

要在Selenium中向下滚动，请使用以下代码：

直到底部下拉，滚动到页面高度。 使用下面的javascript代码，可以在JavaScript和React中正常工作。

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

答案 14 :(得分：1)

试图计算文档高度的答案太多。但这对我来说计算不正确。但是，这两个都有效：

jquery 

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

或者只是

    window.scrollTo(0,9999);

答案 15 :(得分：1)

一种非常简单的方式

只要您想向下滚动，请调用此功能。

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>

答案 16 :(得分：1)

这是一种对我有用的方法：

预期结果：

  • 没有滚动动画
  • 首次加载时在页面底部加载
  • 在页面底部加载以进行所有刷新

代码：

<script>
    function scrollToBottom() {
        window.scrollTo(0, document.body.scrollHeight);
    }
    history.scrollRestoration = "manual";
    window.onload = scrollToBottom;
</script>

为什么这可能优于其他方法：

Chrome 等浏览器具有内置预设，可在刷新后记住您在页面上的位置。只是一个 window.onload 不起作用，因为您的浏览器会自动将您滚动回刷新之前的位置，在您调用以下行后：

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

这就是为什么我们需要添加：

history.scrollRestoration = "manual";

在 window.onload 之前先禁用该内置功能。<​​/p>

参考：

<块引用>

window.onload 的文档：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload

<块引用>

window.scrollTo 的文档：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

<块引用>

history.scrollRestoration 的文档：https://developer.mozilla.org/en-US/docs/Web/API/History/scrollRestoration

答案 17 :(得分：0)

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

答案 18 :(得分：0)

window.scrollTo（0,1e10）;

始终有效。

1e10很大。因此它始终是页面的结尾。

答案 19 :(得分：0)

这将确保滚动到底部

邮政编码 

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

身体代码 

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

答案 20 :(得分：0)

一张图片值一千字：

关键是：

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

它使用document.documentElement元素，即<html>。就像使用window一样，但这只是我个人的喜好，因为如果它不是整个页面而是一个容器，则它的工作原理与此相同，只是您需要更改{{1} }和document.body至document.documentElement。

示例：

document.querySelector("#container-id")
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; }，则可以比较差异：

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

答案 21 :(得分：0)

我有一个具有动态内容的Angular应用程序，我尝试了上述几个答案，但收效甚微。我调整了@Konard的答案，并使其在普通JS中可以正常工作：

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

在最新的Chrome，FF，Edge和现有的Android浏览器上进行了测试。这是一个小提琴：

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

答案 22 :(得分：0)

我遇到了同样的问题。对我而言，在某个时间点，div的元素没有完全加载，并且用当前的scrollHeight值初始化了scrollTop属性，而当前值不是scrollHeight的正确最终值。

我的项目在Angular 8中，我所做的是：

  1. 我使用viewchild来获取.ts文件中的元素。
  2. 我继承了AfterViewChecked事件，并在其中放置了一行代码，该代码指出viewchild元素必须将scrollHeight的值（this.viewChildElement.nativeElement.scrollTop = this.viewChildElement.nativeElement）放入滚动顶部值。 scrollHeight;）

AfterViewChecked事件触发几次，最后从scrollHeight获得正确的值。

答案 23 :(得分：0)

我找到了实现它的窍门。

将输入类型的文本放在页面底部，并在需要时在底部调用一个jquery焦点。

将其设为只读且漂亮的CSS，以清除边框和背景。

答案 24 :(得分：-1)

如果有人搜索Angular

您只需要向下滚动将其添加到div 

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

   <div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
   </div>
相关问题
最新问题