滚动回div的顶部(Scroll back to the top of div)

2019-06-24 18:58发布

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

scrollTo

window.scrollTo(0, 0);

是滚动窗口顶端的终极解决方案 - 最好的部分是,它不需要任何id选择,甚至如果我们用IFRAME结构,将工作得非常好。

的scrollTo()方法滚动文档到指定的坐标。
window.scrollTo(XPOS,ypos);
XPOS所需数量。 坐标滚动到,沿着x轴(水平),以像素为单位
ypos所需数量。 坐标滚动到,沿着y轴(垂直),以像素为单位

jQuery的

做同样的另一种选择是使用jQuery,它会给一个相同的平滑的外观

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

其中0的scrollTop的指定像素中的垂直滚动条位置之后和第二参数是可选的参数表示在微秒的时间来完成该任务。



Answer 5:

对于那些谁仍然无法使这项工作,确保溢出的元素是使用jQuery函数之前显示

例如:

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


Answer 6:

这为我工作:

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


Answer 7:

对我来说,scrollTop的方式没有工作,但我发现其他:

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

没有检查可靠的CSS渲染的最短时间,虽然,100ms的可能是矫枉过正。



Answer 8:

如果HTML内容溢出单视,这个工作我只有JavaScript使用:

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

问候,



Answer 9:

如果你想顺利过渡到滚动,你可以用这个!

(香草JS)

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

如果你的目标用户是ChromeFirefox,那么这是好! 但遗憾的是不支持这种方法在所有浏览器不够好。 检查这里

希望这可以帮助!!



Answer 10:

按照弗朗索瓦·诺埃尔的回答“对于那些谁仍然无法使这项工作,确保溢出的元素是使用jQuery函数之前显示。”

我曾在一个引导模式,我反复带来了帐户权限在该y维度溢出一个div一直在努力。 我的问题是,我试图用jQuery的.scrollTop(0)功能,它不会工作,无论我如何努力做到这一点。 我必须设置为不重置滚动条,直到模式已经停止动画模态的事件。 终于为我工作的代码是在这里:

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


Answer 11:

这两个代码工作对我来说就像一个魅力这首将采取滚动到页面的顶部,但如果你想滚动到一些具体的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);


文章来源: Scroll back to the top of div