滚动回可滚动 div 的顶部

小开

最佳答案

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

请参见 scrollTop属性。

小开

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

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

小开

我尝试了这个问题的现有答案，没有一个对我来说在 Chrome 上有用。起作用的东西略有不同:

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

小开

对我来说，顶级方法不起作用，但我发现了其他方法:

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

虽然没有检查可靠的 css 渲染的最小时间，100毫秒可能是过度杀伤。

小开

滚动

window.scrollTo(0, 0);

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

ScrollTo ()方法将文档滚动到指定的坐标。
ScrollTo (xpos，ypos) ;
所需的 xpos 编号。要沿着 x 轴(水平)滚动到的坐标，以像素为单位
所需的 ypos 编号。以像素为单位沿 y 轴(垂直)滚动到的坐标

JQuery

另一个同样的选择是使用 jQuery，它将为同样的操作提供更流畅的外观

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

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

小开

对于那些仍然不能使这个工作，确保 在使用 jQuery 函数之前显示溢出元素。

例如:

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

小开

如果 html 内容溢出了一个单独的视口，这对我来说只使用 javascript 就可以了:

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

问候,

小开

这对我很有效:

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

小开

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

(香草 JS)

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

如果您的目标用户是 铬合金和火狐，那么这是很好! 但不幸的是，这个方法在所有浏览器

希望这个能帮上忙！

小开

正如 François Noël 的回答: “对于那些仍然不能使用这个函数的人，确保在使用 jQuery 函数之前显示溢出的元素。”

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

    $('#add-modal').on('shown.bs.modal', function (e) {
$('div.border').scrollTop(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);

小开

这是唯一对我有效的方法，平滑的滚动过渡:

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

小开

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

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

无法工作。请使用下面的代码代替。

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

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

小开

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

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

小开

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
}

DOCS: < a href = “ https://developer.mozilla.org/en-US/DOCS/Web/API/Window/roll”rel = “ norefrer”> https://developer.mozilla.org/en-us/DOCS/web/api/window/scroll

扩展阅读: .scrollIntoView() < a href = “ https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView”rel = “ noReferrer”> 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>