Question

您好我的网站有问题。我想创建一个JavaScript函数，它向下滚动到一个id为#important的对象。通常我只是修改page.html＃important的链接。但是因为对象位于div的底部，而div的滚动条本身不起作用。

代码：

<script language="javascript" type="text/javascript">
    var timeout = setInterval(reloadChat, 10);  
    function reloadChat() {
        $("#chat").load("chat.php");
    }
    reloadChat();
</script>

并在chat.php中我从我的数据库中获取行，其中最后一行显示在<div id="lastmessage"></div>中，我想向下滚动到

提前致谢

Answer 1

.scrollIntoView（）是你想要的吗？ https://www.w3schools.com/jsref/met_element_scrollintoview.asp

或许这有用吗？ https://stackoverflow.com/a/270628/4335288

var objDiv = document.getElementById（＆＃34; important＆＃34;）; objDiv.scrollTop = objDiv.scrollHeight;

Answer 2

这对我有用。

https://www.sitepoint.com/community/t/auto-scrolling-a-div-with-overflow-scroll-auto/2291/3

上述链接中的解决方案讨论了如何在加载页面时自动滚动特定div的内容。

Answer 3

我会使用Element.scrollIntoView()将行为设置为平滑。

来源：https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

window.onload = function(e){ 
  var element = document.getElementById('second');
  element.scrollIntoView({ behavior: 'smooth' });
}

#first {
  height: 2000px;
  background-color: lightgreen;
}

#second {
  height: 2000px;
  background-color: lightpink;
}

#third {
  height: 2000px;
  background-color: lightblue;
}

<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
  </body>
 </html>

behavior: 'smooth'将很快提供良好的用户体验。

您可以选择何时致电element.scrollIntoView({ behavior: 'smooth' });。调用时它将滚动到该DOM元素。

在div内自动滚动

3 个答案: