滚动回可滚动 div 的顶部

Question

<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 的顶部？

Answer 1

var myDiv = document.getElementById('containerDiv');
myDiv.innerHTML = variableLongText;
myDiv.scrollTop = 0;

请参阅scrollTop属性。

Answer 2

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

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

Answer 3

我尝试了这个问题的现有答案，但没有一个适合我在 Chrome 上工作。 工作的内容略有不同：

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

Answer 4

这对我有用：

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

Answer 5

滚动到

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 指定像素中的垂直滚动条位置，第二个参数是可选参数，显示完成任务的时间（以微秒为单位）。

Answer 6

对于仍然无法完成这项工作的人，请确保在使用 jQuery 函数之前显示溢出的元素。

例子：

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

Answer 7

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()见： .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>

Answer 8

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

（香草JS）

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

如果您的目标用户是Chrome和Firefox ，那么这很好！ 但不幸的是，这种方法在所有浏览器上都没有得到足够的支持。 检查这里

希望这可以帮助！！

Answer 9

按类名获取元素时，不要忘记返回值是一个数组； 因此这个代码：

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

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

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

我想其他人可能会遇到和我一样的问题； 所以这应该可以解决问题。

Answer 10

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

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

虽然没有检查可靠 css 渲染的最短时间，但 100 毫秒可能有点过头了。

Answer 11

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

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

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

Answer 12

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

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

Answer 13

ID 应该具有具有溢出 css 属性的相应 div 的 id。

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

Answer 14

如果 html 内容溢出单个视口，这对我只使用 javascript 有用：

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

问候，

Answer 15

这两个代码对我来说就像一个魅力，这首先将滚动到页面顶部，但如果你想滚动到某个特定的 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);