如何使用 jQuery 滚动到 div 顶部?

发布于 2024-08-24 08:51:25 字数 684 浏览 10 评论 0原文

我在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 问题完全相同页...更改页号时,它会滚动到顶部并具有平滑效果...我想实现这一目标...

I have a gridview inside a div.. I want to scroll to top of the div from the bottom of the div using jquery.. Any suggestion..

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

My gridview will have custom pagination generated link buttons in it... I will scroll to top of the div from the bottom of the link button click ...

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);

In the place of javascript, I ll call the jquery function... Any suggestion...

EDIT:

Exactly like Stackoverflow questions per user page... When changing page nos it scrolls to top with smooth effect... I want to achieve that...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(7

ぶ宁プ宁ぶ 2024-08-31 08:51:25

以下是使用 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');
});

Here is what you can do using 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');
});
红玫瑰 2024-08-31 08:51:25

或者,为了减少代码,在您的点击中放置:

setTimeout(function(){ 

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

}, 500);

Or, for less code, inside your click you place:

setTimeout(function(){ 

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

}, 500);
西瓜 2024-08-31 08:51:25

特别感谢斯多葛派

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

Special thanks to Stoic for

   $("#miscCategory").animate({scrollTop: $("#miscCategory").offset().top});
浅唱々樱花落 2024-08-31 08:51:25

你可以只使用:

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

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

You could just use:

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

<a href="#GridDiv">Scroll to top</a>
半﹌身腐败 2024-08-31 08:51:25

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

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

This is my solution to scroll to the top on a button click.

$(".btn").click(function () {
if ($(this).text() == "Show options") {
$(".tabs").animate(
  {
    scrollTop: $(window).scrollTop(0)
  },
  "slow"
 );
 }
});
行雁书 2024-08-31 08:51:25

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

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

使用 Firefox / Chrome / Edge 进行测试。

I don't know why but you have to add a setTimeout with at least for me 200ms:

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

Tested with Firefox / Chrome / Edge.

丑丑阿 2024-08-31 08:51:25

使用以下函数

window.scrollTo(xpos, ypos)

此处 xpos 是必需的。沿 x 轴(水平)滚动到的坐标(以像素

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

Use the following function

window.scrollTo(xpos, ypos)

Here xpos is Required. The coordinate to scroll to, along the x-axis (horizontal), in pixels

ypos is also Required. The coordinate to scroll to, along the y-axis (vertical), in pixels

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文