使用 Jquery 在页面刷新时停止 Div 滚动到顶部

Question

我有两个相同的页面 css class 和相同的 id，但由于它们在不同的页面上，所以 id 是分隔符。

第 1 页) 得到一个 Div 每 5 秒刷新一次。 div 将滚动设置为滚动，以便用户可以滚动，但是当刷新发生时，div 滚动会回到顶部。 上的任何 ideas/written 脚本如何在刷新 div 后保持滚动位置?

Page 2)这个和page 1类似，其他来自，当用户第一次来到这个页面时，我希望滚动位置在底部，然后当刷新发生时，我想在 div 刷新

后滚动到 的任何地方保持滚动位置

底线：我是前端设计的新手，所以拜托，你的贡献应该是我很容易理解或接近容易理解的东西 这是我的 css

 .msg_container_base{
      background: #fff;
      margin: 0;
      padding: 0 10px 10px;
      max-height:400px;
      overflow-x:hidden;
      overflow-y:auto;
    }

    .msg_container_base::-webkit-scrollbar-track
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #fff;
    }

    .msg_container_base::-webkit-scrollbar
    {
        width: 12px;
        background-color: #fff;
    }

    .msg_container_base::-webkit-scrollbar-thumb
    {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #fff;
    }

这是我的 java 加载和刷新脚本

 <script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$("#grid").load('mai/ #grid');
}, 20000); // refresh every 10000 milliseconds

</script> 
        <div id="grid">

        @RenderPage("~/mai.cshtml") 
      </div>

Answer 1

看到这个 Fiddle : http://jsfiddle.net/tu6fj8jq/7/

使用 element.scrollTop 可以在刷新前将滚动位置存储在 div 中

滚动 div 时输出另一个元素的滚动位置 :

$("div").on("scroll", function()
{
    $("span").html($("div")[0].scrollTop);
});

对于第二部分，您可以在页面加载时将 div 滚动到底部，如下所示：

$(function()
{
  $("#bottom")[0].scrollTop = $("#bottom")[0].scrollHeight - $("#bottom").height();
});

Answer 2

将您的 Gridview 或代码放入 UpdatePanel。

  <asp:UpdatePanel ID="upnldownload" runat="server">
                        <ContentTemplate>                        
                            <asp:GridView ID="gvDownload" CssClass="grid" runat="server" AutoGenerateColumns="False"                              DataKeyNames="Id" />
                                <Columns> 

bla////
bla///[![enter image description here][1]][1]                                
                                </Columns>
                            </asp:GridView>

                               </ContentTemplate>                     
                       </asp:UpdatePanel>
                        </div>

  [1]: http://i.stack.imgur.com/u6EpF.jpg

使用 Jquery 在页面刷新时停止 Div 滚动到顶部

Stop Div scrolling to the top at Page Refresh using Jquery

html

javascript

css

scroll