考虑我有一个问题清单。当我单击第一个问题时，它应该自动将我带到页面底部。
事实上，我确实知道可以使用jQuery完成此操作。
那么，您能提供一下吗？
编辑：需要滚动到页面底部的特定HTML元素

评论

此处：：stackoverflow.com/questions/4249353/…

#1 楼

不需要jQuery。我从Google搜索获得的大多数热门结果都给了我这个答案：
window.scrollTo(0,document.body.scrollHeight);

在您嵌套了元素的位置，文档可能不会滚动。在这种情况下，您需要定位要滚动的元素并使用其滚动高度。
window.scrollTo(0,document.querySelector(".scrollingContainer").scrollHeight);
您可以将其与问题的onclick事件关联（即<div onclick="ScrollToBottom()" ...）。
有些其他您可以查看以下来源：

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 /


评论

没为我工作。我这样做：element.scrollTop = element.scrollHeight。

– Esamo
15年8月17日在14:54
2016年5月4日：请注意，“ scrollTo”功能是实验性功能，不适用于所有浏览器。

– corgrath
16年5月4日在5:31
scrollto在我的浏览器上不起作用，我在stackoverflow.com/questions/8917921/…下找到了此链接，该链接非常有用，因为解决方案可在我尝试过的浏览器上使用。

–user3655574
17年4月12日在2:36
对于单独的元素，这是可行的解决方案：document.querySelector（“。scrollingContainer”）。scrollTo（0，document.querySelector（“。scrollingContainer”）。scrollHeight）;

– mPrinC
18年10月10日在7:10
可能必须将html设置为100％才能滚动到底部

–汤普森（Trever Thompson）
2月19日下午6:31

#2 楼

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

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/

评论

该解决方案适用于Chrome，Firefox，Safari和IE8 +。查看此链接以获取更多详细信息quirksmode.org/dom/w3c_cssom.html

–雷
16 Jan 26'8:49


@luochenhuan，我刚刚使用“ document.scrollingElement”而不是“ document.body”修复了示例代码，请参见上文

–David Avsajanishvili
18年4月17日在4:35

#3 楼

Vanilla JS实现：

element.scrollIntoView(false);


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

评论

使用jQuery $（'＃id'）[0] .scrollIntoView（false）;

– alexoviedo999
2014年11月5日在21:18


目前只有Firefox

– tim-we
2015年6月5日上午10:37
现在可以在较新版本的Chrome中使用，但是某些额外的选项（如平滑滚动）似乎尚未实现。

–马特·祖科夫斯基
16年2月17日在16:42
我在页面末尾添加了一个空的div，并使用了该div的ID。工作完美。

– Nisba
18-3-6在16:28


更好的是：element.scrollIntoView（{behavior：“ smooth”}）;

–白
18年5月24日在0:45

#4 楼

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

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


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

评论

它确实可以在Firefox 62.0.3中运行，但是当他们解决该问题时我一无所知。

–zb226
18-10-18在11:43
window.scrollTo（0，document.body.scrollHeight || document.documentElement.scrollHeight）; -滚动不流畅。如何使滚动平滑@PixelsTech

– Akanksha Mohanty
12月18日9:27

#5 楼

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

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


#6 楼

有时，页面会滚动到底部（例如，在社交网络中），然后向下滚动至底部（页面的最终底部）。我使用以下脚本：

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


评论

let size =（$（“ div [class * ='card-inserted']”））。length; （$（“ div [class * ='card-inserted']”））[size -1] .scrollIntoView（）;

– nobjta_9x_tq
18年7月26日在3:36


#7 楼

您可以在需要调用它的任何地方使用此函数：

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

}


jquery.com：ScrollTo

评论

对我来说，document.getElementById（'copyright'）。scrollTop + = 10不起作用（在最新的Chrome中）...保持为零...

–凯尔·贝克（Kyle Baker）
16年11月4日在16:27

#8 楼

您也可以使用动画来做到这一点，它非常简单

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


谢谢

#9 楼

一根衬纸可平滑滚动到底部

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


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

评论

此解决方案在IE中不起作用。是否可以添加任何锻炼以使它在IE中也能正常工作。

– Akanksha Mohanty
12月18日晚上10:44

#10 楼

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

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


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

评论

这不适合我，因为它会更改url，然后将我的角度应用重定向到其他内容！

–heman123
17年7月22日在12:57

#11 楼

您可以尝试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上正常使用


#12 楼

晚会晚了，但这是一些简单的纯JavaScript代码，可将任何元素滚动到底部：

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


#13 楼

对于在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 楼

试图计算文档高度的答案太多了。但这对我来说计算不正确。但是，这两种方法都起作用：

jquery 

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


或只是js 

    window.scrollTo(0,9999);


评论

大声笑“工作”。如果文档长于9999，该怎么办？

– Dan Dascalescu
5月18日9:55
@DanDascalescu 99999

–安德鲁（Andrew）
5月18日16:56
如果文档长于99999怎么办？

–布伦登·缪尔（Brendon Muir）
10月29日1:32
@BrendonMuir如果文档长于99999，则可以在答案中的javascript代码上方定义一个javascript变量，以获取文档的动态高度，并使用该变量代替硬编码的99999

– nviens
11月24日14:21


抱歉@nviens，我只是傻了，接下来是DanDascalescu：D

–布伦登·缪尔（Brendon Muir）
11月25日下午3:55

#15 楼

这是我的解决方案：

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


评论

什么...到底在发生什么？在乎您解释解决方案吗？不鼓励仅使用代码的答案。

– Dan Dascalescu
5月18日9:55

#16 楼

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

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




 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>




评论

这并不简单，需要创建滚动元素。

– Dan Dascalescu
5月18日9:57
@DanDascalescu你是对的！但是我的代码有效，我认为它不应该被否决

– Shrroy
5月18日13:09
“工作”还不够。此页面上的所有解决方案都在一定程度上“起作用”。而且有很多。读者应该如何决定？

– Dan Dascalescu
5月19日1:03

#17 楼

这将保证滚动到底部

标题代码

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


#18 楼

一幅价值一千个单词的图片：

关键是：

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




#19 楼

我有一个具有动态内容的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/

#20 楼

我有同样的问题。对我而言，在某个时间点，div的元素没有完全加载，并且scrollTop属性已使用scrollHeight的当前值初始化，而当前值不是scrollHeight的正确最终值。
我的项目在Angular 8中，而我确实是：

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

AfterViewChecked事件会触发几次，并进入从scrollHeight终止正确的值。

#21 楼

我找到了使之实现的技巧。
在页面底部放一个输入类型的文本，并在需要时在底部放一个jquery焦点。
使其只读和漂亮的CSS清除边框和背景。

#22 楼

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


#23 楼

window.scrollTo（0,1e10）;

总是有效。

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

#24 楼

如果有人在搜索Angular

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

 #scrollMe [scrollTop]="scrollMe.scrollHeight"

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