滚动回到可滚动div的顶部

问题描述 投票:0回答:16
<div id="containerDiv"></div>
#containerDiv {
  position: absolute;
  top: 0px;
  width: 400px;
  height: 100%;
  padding: 5px;
  font-size: .875em;
  overflow-y: scroll;
}
document.getElementById("containerDiv").innerHTML = variableLongText;

下次如何将滚动位置重置回容器div的顶部?

javascript html scroll
16个回答
292
投票
var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

请参阅

scrollTop
属性。


73
投票

另一种使用平滑动画的方法是这样的

$("#containerDiv").animate({ scrollTop: 0 }, "fast");

40
投票

这对我有用:

document.getElementById('yourDivID').scrollIntoView();

32
投票

我尝试了这个问题的现有答案,但没有一个对我来说适用于 Chrome。所做的工作略有不同:

$('body, html, #containerDiv').scrollTop(0);

22
投票

2020 更新

您可以使用

.scroll()
轻松滚动元素或窗口。它有一个内置平滑滚动效果,所以基本上代码再简单不过了。

标准性能:

var options = {
    top:       0,        // Number of pixels along the Y axis to scroll the window or element
    left:      0,        // Number of pixels along the X axis to scroll the window or element.
    behavior:  'smooth'  // ('smooth'|'auto') - animate smoothly, or move in a single jump
}

文档: https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

另请参阅:

.scrollIntoView()
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView


演示:

document.getElementById('btn').addEventListener('click',function(){

  document.getElementById('container').scroll({top:0,behavior:'smooth'});
  
});
/* DEMO */
#container {
  width: 300px;
  max-height: 300px;
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  background-color: #222;
  color: #ccc;
  text-align: justify;
  overflow-y: auto;
}
#btn {
  width: 100%;
  margin-top: 1rem;
}
<div id="container">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <button id="btn">Scroll to top</button>
</div>


20
投票

滚动至

window.scrollTo(0, 0);

是将窗口滚动到顶部的最终解决方案 - 最好的部分是它不需要任何 id 选择器,即使我们使用 IFRAME 结构,它也会工作得非常好。

scrollTo() 方法将文档滚动到指定的坐标。
window.scrollTo(xpos, ypos);
xpos 需要号码。沿 x 轴(水平)滚动到的坐标,以像素为单位
ypos 需要号码。沿 y 轴(垂直)滚动到的坐标,以像素为单位

jQuery

执行相同操作的另一个选项是使用 jQuery,它将提供更平滑的外观

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

其中scrollTop之后的0指定像素中的垂直滚动条位置,第二个参数是可选参数,它显示完成任务的时间(以微秒为单位)。


14
投票

对于那些仍然无法完成此工作的人,请确保在使用 jQuery 函数之前显示溢出的元素

示例:

$('#elem').show();
$('#elem').scrollTop(0);

6
投票

通过类名获取元素时,不要忘记返回值是一个数组;因此这段代码:

document.getElementByClassName("dropdown-menu").scrollTop = 0

行不通。请改用下面的代码。

document.getElementByClassName("dropdown-menu")[0].scrollTop = 0

我想其他人可能也会遇到和我类似的问题;所以这应该可以解决问题。


5
投票

如果你想滚动平滑过渡,你可以使用这个!

(原版 JS)

const tabScroll = document.getElementById("tabScroll");
window.scrollTo({
  'behavior': 'smooth',
  'left': 0,
  'top': tabScroll.offsetTop - 80
});

如果您的目标用户是 ChromeFirefox,那么这是 好的!但不幸的是,这种方法并没有得到很好的支持 所有浏览器。 查看这里

希望这有帮助!!


2
投票

对我来说,scrollTop 方式不起作用,但我发现了其他方式:

element.style.display = 'none';
setTimeout(function() { element.style.display = 'block' }, 100);

虽然没有检查可靠的 CSS 渲染的最短时间,100 毫秒可能有点过分了。


2
投票

根据 François Noël 的回答“对于那些仍然无法完成这项工作的人,请确保在使用 jQuery 函数之前显示溢出的元素。”

我一直在引导模式中工作,我反复在 y 维度上溢出的 div 中提出帐户权限。我的问题是,我试图使用 jquery .scrollTop(0) 函数,但无论我如何尝试,它都无法工作。我必须为模态设置一个事件,该事件不会重置滚动条,直到模态停止动画为止。最终对我有用的代码在这里:

    $('#add-modal').on('shown.bs.modal', function (e) {
        $('div.border').scrollTop(0);
    });

2
投票

ID应该是具有overflow css属性的相应div的id。

document.querySelector('#YOUR_OVERFLOWED_DIV').scrollTop = 0;


1
投票

如果 html 内容溢出单个视口,这对我来说仅使用 javascript 就有效:

document.getElementsByTagName('body')[0].scrollTop = 0;

问候,


1
投票

这是它对我有用的唯一方法,具有平滑的滚动过渡:

  $('html, body').animate({
    scrollTop: $('#containerDiv').offset().top,
  }, 250);

0
投票

这两个代码对我来说就像魅力一样 第一个将滚动到页面顶部,但如果您想滚动到某个特定的 div,请使用第二个和您的 div id。

$('body, html, #containerDiv').scrollTop(0);
document.getElementById('yourDivID').scrollIntoView();

如果您想按类名滚动到,请使用以下代码

var $container = $("html,body");
var $scrollTo = $('.main-content');

$container.animate({scrollTop: $scrollTo.offset().top - $container.offset().top + $container.scrollTop(), scrollLeft: 0},300);

0
投票

这个聚会可能有点晚了,但如果您打算使用“display=none”,请确保在隐藏它之前滚动到顶部。 (这个概念是一个弹出窗口,允许人们读到底部,然后单击一个按钮来“隐藏”div。当他们下次再次打开它时,滚动再次位于顶部)

© www.soinside.com 2019 - 2024. All rights reserved.