小开

最佳答案

jQuery不是必需的。我从谷歌搜索中得到的大多数结果都是这样的答案:

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

在有嵌套元素的地方，文档可能无法滚动。在这种情况下，你需要瞄准滚动的元素，并使用它的滚动高度。

# EYZ0

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

你可以参考一些其他的来源:

小开

你可以试试< >强温柔锚< / >强这个不错的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应该没问题

小开

你可以在任何需要调用它的地方使用这个函数:

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


}

jquery.com: ScrollTo

小开

你也可以用动画来做这个，非常简单

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

< p >希望帮助, 谢谢你< / p >

小开

香草JS实现:

element.scrollIntoView(false);

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

小开

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

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

window.scrollTo (0, document.body.scrollHeight);不能在Firefox上运行，至少不能在Firefox 37.0.2上运行

小开

滚动整个页面到底部:

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

您可以查看演示在这里

将一个特定的元素滚动到底部:

const scrollToBottom = (id) => {
const element = document.getElementById(id);
element.scrollTop = element.scrollHeight;
}

这是演示

它是这样工作的:

参考:scrollTop， scrollHeight， clientHeight

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

小开

以下是我的解决方案:

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

小开

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

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

小开

来晚了，但这里有一些简单的javascript代码，可以将任何元素滚动到底部:

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

小开

有时页面会滚动到底部(例如在社交网络中)，向下滚动到最后(页面的最终底部)，我使用这个脚本:

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

小开

你可以将任何id附加到link元素的引用属性href上:

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

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

小开

在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)", "");

小开

如果您想向下滚动到特定元素，这是一种简单的方法。

当您想向下滚动时，请调用此函数。

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>

小开

那么多的答案试图计算文件的高度。但对我来说，这并不是正确的计算。然而，这两种方法都有效:

jquery

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

或者只是js

    window.scrollTo(0,9999);

小开

window.scrollTo (0,1 e10);

总是工作。

1e10是个很大的数字。所以它总是在页面的末尾。

小开

如果有人在搜索Angular

你只需要向下滚动添加到你的div

 #scrollMe [scrollTop]="scrollMe.scrollHeight"


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

小开

一个内线平滑滚动到底部

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

向上滚动只需将top设置为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>

小开

一图胜千言万语:

关键是:

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

它使用document.documentElement，即<html>元素。这就像使用window，但这只是我的个人偏好这样做，因为如果它不是整个页面，而是一个容器，它就像这样工作，除非你把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);

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

小开

我有一个带有动态内容的Angular应用，我尝试了上面的几个答案，但都不太成功。我改编了@Konard的回答，并让它在纯JS中为我的场景工作:

超文本标记语言

<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和安卓浏览器上测试。这是小提琴:

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

小开

我也遇到过同样的问题。对于我来说，在一个时间点上，div的元素没有完全加载，scrollTop属性是用scrollHeight的当前值初始化的，这不是scrollHeight的正确结束值。

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

我使用viewchild来获取.ts文件中的元素。
我已经继承了AfterViewChecked事件，并在那里放置了一行代码，其中声明viewchild元素必须将scrollTop值的值scrollHeight (this.viewChildElement.nativeElement。scrollTop = this.viewChildElement.nativeElement.scrollHeight;)

AfterViewChecked事件触发了几次，它最终从scrollHeight中获得了正确的值。

小开

我找到了一个诀窍。

在页面底部放置一个输入类型文本，并在需要时调用jquery focus。

使它为只读和漂亮的css清除边界和背景。

小开

这里有一个对我有用的方法:

预期结果:

无滚动动画
在第一次加载页面底部加载
加载在页面底部的所有刷新

代码:

<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之前禁用该内置特性。

引用:

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

小开

CSS-Only ? !

一个有趣的css替代方案:

display: flex;
flex-direction: column-reverse;


/* ...probably usually along with: */


overflow-y: scroll;  /* or hidden or auto */
height: 100px; /* or whatever */

它是不是防弹，但我发现它在一些情况下很有用。

# eyz3: # eyz4， # eyz5， # eyz6

^演示:

var i=0, foo='Lorem Ipsum & foo in bar or blah ! on and'.split(' ');
setInterval(function(){demo.innerHTML+=foo[i++%foo.length]+' '},200)

#demo{ display:flex;
flex-direction:column-reverse;
overflow-y:scroll;
width:150px;
height:150px;
border:3px solid black; }
body{ font-family:arial,sans-serif;
font-size:15px; }

Autoscrolling demo:&#x1f43e;
<div id='demo'></div>

小开

我们可以使用ref和by getElementById滚动特定的模态或页面。

 const scrollToBottomModel = () => {
const scrollingElement = document.getElementById("post-chat");
scrollingElement.scrollTop = scrollingElement.scrollHeight;
};

在模态体中，你可以调用上面的函数

 <Modal.Body
className="show-grid"
scrollable={true}
style=\{\{
maxHeight: "calc(100vh - 210px)",
overflowY: "auto",
height: "590px",
}}
ref={input => scrollToBottomModel()}
id="post-chat"
>

会起作用

小开

一个使用jquery的简单例子

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

小开

我放弃了滚动，而是尝试了锚定方法:

<a href="#target_id_at_bottom">scroll to the bottom</a>

伴随着这个CSS魅力:

html,
body {
scroll-behavior: smooth;
}

祝你有愉快的一天!

自动滚动到页面底部

例子:

这里有一个对我有用的方法:

预期结果:

代码:

为什么这种方法比其他方法更有效:

引用:

CSS-Only ? !

演示:

^演示: