如何使用 jQuery 滚动到 div 的顶部？答案

【问题标题】：How to scroll to top of a div using jQuery?如何使用 jQuery 滚动到 div 的顶部？
【发布时间】：2020-04-29 13:51:28
【问题描述】：

我在 div 中有一个 gridview.. 我想使用 jquery 从 div 底部滚动到 div 顶部.. 任何建议..

<div id="GridDiv">
// gridview inside..
</div>

我的 gridview 将在其中包含自定义分页生成的链接按钮...我将从链接按钮的底部滚动到 div 的顶部单击...

protected void Nav_OnClick(object sender, CommandEventArgs e)
    {
        LinkButton lb1 = (LinkButton)sender;
        //string s = lb1.ID;
        ScriptManager.RegisterClientScriptBlock(lb1, typeof(LinkButton), 
 "scroll", "javascript:document.getElementById('GridDiv').scrollTop = 0;", true);

在javascript的地方，我将调用jquery函数......任何建议......

编辑：

就像每个用户页面的 Stackoverflow 问题...当更改页面编号时，它会以平滑的效果滚动到顶部...我想实现这一点...

【问题讨论】：

也许我理解错了，但你为什么不直接使用页面锚点？

标签： jquery html scroll scrolltop

【解决方案1】：

以下是您可以使用 jquery 执行的操作：

$('#A_ID').click(function (e) { //#A_ID is an example. Use the id of your Anchor
    $('html, body').animate({
        scrollTop: $('#DIV_ID').offset().top - 20 //#DIV_ID is an example. Use the id of your destination on the page
    }, 'slow');
});

【讨论】：

@citress 硬编码的值是让 div 的顶部不在浏览器窗口的最顶部，纯粹是为了美观。（应该可以省略）
@GregMathews“可能应该忽略它”，但每次我这样做时，我都必须添加偏移量以确保它是有效的、专业的执行。 +1 只是为了包括偏移量。

【解决方案2】：

或者，对于更少的代码，在您的点击中放置：

setTimeout(function(){ 

$('#DIV_ID').scrollTop(0);

}, 500);

【讨论】：

这在 jQuery 2.2.0 中不起作用。但 116 票的答案确实如此。
您必须添加一个setTimeout 才能使其工作：setTimeout(function )( { $('#DIV_ID').scrollTop(0); }, 500);
谢谢London，我会编辑的，好像事情已经改变了
语法不正确。应该是：setTimeout(function() { $('#DIV_ID').scrollTop(0); }, 500);

【解决方案3】：

你可以使用：

<div id="GridDiv">
// gridview inside...
</div>

<a href="#GridDiv">Scroll to top</a>

【讨论】：

你不需要锚。只需转到#GridDiv。
+1 为用户问题提供了技术上出色的解决方案......但对于任何寻求实际问题答案的人来说完全没用。（锚不能解决我的问题，我需要使用 javascript 将屏幕滚动到 div 的顶部！--抱怨，因为这对我来说是谷歌搜索结果）
@RonLugge 在这种情况下，Greg Mathews 的回答可能会有所帮助。尝试设置 scrollTop 属性或为其设置动画。
@D_N 谢谢！更新了答案。
@AtesGoral 是的，我最终这样做了——他得到了支持（尽管我不喜欢那种“局促”的代码风格）。 '最佳答案'并没有回答实际问题，这让我感到好笑和烦恼。

【解决方案4】：

特别感谢斯多葛派

   $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});

【讨论】：

【解决方案5】：

这是我在单击按钮时滚动到顶部的解决方案。

$(".btn").click(function () {
if ($(this).text() == "Show options") {
$(".tabs").animate(
  {
    scrollTop: $(window).scrollTop(0)
  },
  "slow"
 );
 }
});

【讨论】：

【解决方案6】：

我不知道为什么，但你必须添加一个 setTimeout 至少对我来说 200 毫秒：

setTimeout( function() {$("#DIV_ID").scrollTop(0)}, 200 );

用 Firefox / Chrome / Edge 测试。

【讨论】：

【解决方案7】：

使用下面的函数

window.scrollTo(xpos, ypos)

这里 xpos 是必需的。沿 x 轴（水平）滚动到的坐标，以像素为单位

ypos 也是必需的。沿 y 轴（垂直）滚动到的坐标，以像素为单位

【讨论】：

这将滚动整个窗口。用户只需滚动一个元素，在本例中为 <div>。