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

时间:2010-03-03 05:59:44

标签: jquery html scroll scrolltop

我在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问题...当更改页面nos时,它会滚动到顶部并且效果平滑......我想实现这个...

7 个答案:

答案 0 :(得分:166)

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

答案 1 :(得分:35)

或者,为了减少代码,您可以在点击内放置:

setTimeout(function(){ 

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

}, 500);

答案 2 :(得分:5)

你可以使用:

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

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

答案 3 :(得分:1)

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

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

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

答案 4 :(得分:1)

这是我的解决方案,只需单击一次按钮即可滚动到顶部。

struct Iter {
  using iterator_category = std::random_access_iterator_tag;
  using value_type        = int;
  using difference_type   = std::ptrdiff_t;
  using reference         = value_type&;
  using pointer           = value_type*;
};

static_assert(std::is_same_v<std::iterator_traits<Iter>::iterator_category, 
                             std::random_access_iterator_tag>);

答案 5 :(得分:0)

使用以下功能

window.scrollTo(xpos, ypos)

这里xpos是必需的。要沿x轴(水平)滚动到的坐标,以像素为单位

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

答案 6 :(得分:0)

特别感谢Stoic

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