考虑一下我有一系列问题。当我点击第一个问题时,它会自动将我带到页面底部。
事实上,我知道这可以使用jQuery完成。
那么,你能给我一些文件或一些链接,我可以找到这个问题的答案吗?
编辑:需要滚动到页面底部的特定HTML 元素
答案 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;
}
这就是它的工作原理:
参考: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
}
答案 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
}
兼容性测试:
答案 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">▼ Bottom ▼</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浏览器上进行了测试。这是一个小提琴:
答案 22 :(得分:0)
我遇到了同样的问题。对我而言,在某个时间点,div的元素没有完全加载,并且用当前的scrollHeight值初始化了scrollTop属性,而当前值不是scrollHeight的正确最终值。
我的项目在Angular 8中,我所做的是:
AfterViewChecked事件触发几次,最后从scrollHeight获得正确的值。
答案 23 :(得分:0)
我找到了实现它的窍门。
将输入类型的文本放在页面底部,并在需要时在底部调用一个jquery焦点。
将其设为只读且漂亮的CSS,以清除边框和背景。
答案 24 :(得分:-1)
如果有人搜索Angular
您只需要向下滚动将其添加到div
#scrollMe [scrollTop]="scrollMe.scrollHeight"
<div class="my-list" #scrollMe [scrollTop]="scrollMe.scrollHeight">
</div>