js实现页面刷新滚动条位置不变
通学真
本文向大家介绍js实现页面刷新滚动条位置不变，包括了js实现页面刷新滚动条位置不变的使用技巧和注意事项，需要的朋友参考一下
今天因为这个问题困扰了很久网上的例子都尝试没效果，后来发现一点原来是内容最外层没有div的原因
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpotChkDetail.aspx.cs" Inherits="Topevery.DUM.Web.Observer.SpotChkDetail" %>
<script runat="server">
protected override bool HeaderScriptFilter(Topevery.Framework.Web.Configuration.Script val)
{
switch (val.Key)
{
case "ajaxpro2.prototype":
case "ajaxpro2.core":
case "ajaxpro2.converter":
case "ajaxpro2.onloading":
case "ajaxpro2.assembly.AjaxFunction":
case "my97":
case "image":
case "jquery.pagination":
case "jquery.jqGrid.locale":
case "jquery.jqGrid":
case "jquery-load-image":
case "jquery.validationEngine":
case "jquery.validationEngine-zh":
case "WeiBo":
case "jquery.mousewheel":
case "jquery.iviewer":
case "jquery.gallery.singer":
return true;
default:
return base.HeaderScriptFilter(val);
}
}
protected override bool HeaderStyleFilter(Topevery.Framework.Web.Configuration.Style val)
{
switch (val.Key)
{
case "jqgrid":
case "jqgrid-grey":
case "validationEngine":
return true;
default:
return base.HeaderStyleFilter(val);
}
}
</script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body id="bbdy">
<form id="form1" runat="server">
<div>
<div class="TUI-layout-north">
<div class="TUI-title">
<span class="TUI-ico ico-note"></span><strong>抽查</strong>
</div>
<div class="" style="float: right; margin-top: -30px; z-index: 99999; position: relative;">
<object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0" width="0">
</object>
<input type="button" class="TUI-button" value="打 印" onclick="document.all.WebBrowser.ExecWB(6, 1)" id="Button2" />
<input type="button" class="TUI-button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7, 1)" />
</div>
<div class="TUI-alert">
<span class="ml10px">抽查时间：<asp:Label ID="lbBeginDate" runat="server" Text="Label"></asp:Label>
失效时间：<asp:Label ID="lbEndDate" runat="server" Text="Label"></asp:Label>
消息内容：<asp:Label ID="lbContent" runat="server" Text="Label"></asp:Label></span>
<div style="display: none">
<asp:Button ID="btnRef" runat="server" OnClick="btnRef_Click" Text="刷新" />
</div>
</div>
</div>
<div class="TUI-layout-center">
<div class="TUI-content TUI-h100 TUI-of-auto TUI-align-center">
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<%--OnItemCommand="Repeater1_ItemCommand"--%>
<HeaderTemplate>
<table class="TUI-grid-list w100" id="observers">
<tr>
<th style="width: 150px">巡查员头像
</th>
<th style="width: 80px">姓 名
</th>
<th style="width: 120px">是否超时
</th>
<%--<th style="width: 110px">城管通号码
</th>
<th style="width: 110px">城管通版本
</th>--%>
<th style="width: 100px">消息状态
</th>
<th style="width: 100px">审核状态
</th>
<th style="width:150px">审核
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="people_title_td">
<td rowspan="2" valign="middle" style="width: 110px">
<img id="img_observer_poto" runat="server" height="135" style="border: 1px solid #bababa;" width="100" />
</td>
<td style="width: 60px">
<%# Eval("c_name")%>
<asp:HiddenField ID="hfObId" runat="server" Value='<%# Eval("c_ob_id") %>' />
<asp:HiddenField ID="hfId" runat="server" Value='<%# Eval("c_id") %>' />
</td>
<td style="width: 100px">
<%# Eval("c_is_over_time")%>
</td>
<%--<td style="width: 110px">
<%# Eval("c_pda_number")%>
</td>
<td style="width: 110px">
<%# Eval("c_pda_version")%>
</td>--%>
<td style="width: 90px">
<%# Eval("notify_state")%>
</td>
<td style="width: 90px">
<%# Eval("eligible_state")%>
</td>
<td style="width:150px;">
<div style="display:<%# Eval("c_is_eligible").ToString() !="0"?"none":"" %>">
<%--<asp:LinkButton ID="LinkButton1" runat="server" CommandName="lnk_poto" CommandArgument='<%# Eval("c_id") %>'>重摄</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="lnk_ok" CommandArgument='<%# Eval("c_id") %>'>合格</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="lnk_no" CommandArgument='<%# Eval("c_id") %>'>不合格</asp:LinkButton>--%>
<a href='#' onclick='review(<%# Eval("c_id") %>,0,"重摄")' class='TUI-toolbar-btn'><span></span>重摄</a>
<a href='#' id="qualified" onclick='review(<%# Eval("c_id") %>,1,"合格")' class='TUI-toolbar-btn'><span></span>合格</a>
<a href='#' id="Unqualified" onclick='review(<%# Eval("c_id") %>,2,"不合格")' class='TUI-toolbar-btn'><span></span>不合格</a>
</div>
</td>
</tr>
<tr class="alt_tr2">
<td colspan="5" style="height: 160px; text-align: left">
<table class="choucha-table">
<tr>
<asp:Repeater ID="rptImg" runat="server">
<ItemTemplate>
<td>
<div class="div_img TUI-notelist-container TUI-gallery choucha-img">
<div id='imge'+'<%#Eval("FileId") %>'>
<div class="TUI-gallery-content TUI-gallery-img">
<a title="点击放大" href="javascript:void(0)"
sourceSrc='<%#Eval("Imageurl") %>' largeSrc='<%#Eval("Imageurl") %>'><img src='<%#Eval("Imagethumbil") %>' /><span><%#Eval("Summary") %></span></a>
</div>
</div>
</div>
</td>
</ItemTemplate>
</asp:Repeater>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<input type="hidden" id="hdnvalue" runat="server" value="0" /><!----存放scorllTop值-->
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
TUILayout("form");
//LoadImage();
$(".div_img").gallery({
gallerySize: { width: 90, height: 120 },
fullView: "true" //ture为允许点击图像全屏浏览
});
});
function LoadImage() {
var jq_o_list = $("#observers div[@ref_id]");
for (var i = 0 ; i < jq_o_list.length; i++) {
load_to(jq_o_list[i]);
}
}
function load_to(obj) {
var jq_o = $(obj);
Topevery.DUM.Web.AjaxFunction.GetEvtDefault(jq_o.attr("ref_id"), function (ajaxResult) {
var val = ajaxResult.value;
jq_o.empty();
jq_o.append(val.Html);
});
}
//$("#div_evt_img").gallery({
// images: evt_img_list,
// thumbSize: { width: 65, height: 60 },//缩略图大小
// gallerySize: { width: 380, height: 280 },//画廊图（中间大图）大小
// thumbDisplayNum: 4,//缩略图显示数量
// scalingSize: { width: 360, height: 260 },//画廊图（中间大图）自动比例缩放最大大小
// fullView: "true" //ture为允许点击图像全屏浏览
//});
function Reminder() {
NotSelectEvt("已经再次发送消息通知巡查员！");
}
function review(id, type, content) {
if (confirmL("确认" + content + "吗？", function () {
Topevery.DUM.Web.AjaxFunction.ReviewImg(id, type);
$("#btnRef").click();
})) {
}
}
</script>
</form>
</body>
</html>
<script type="text/javascript">
window.onbeforeunload = function () {
var scrollPos;
if (typeof window.pageYOffset != 'undefined') {
scrollPos = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' &&
document.compatMode != 'BackCompat') {
scrollPos = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
scrollPos = document.body.scrollTop;
}
document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
}
window.onload = function () {
if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空，则读取滚动条位置
document.documentElement.scrollTop = parseInt(arr[1]);
document.body.scrollTop = parseInt(arr[1]);
}
}
</script>
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持小牛知识库！
类似资料：
-
问题内容： 有人可以告诉我我在做什么错吗？我需要在一段时间后刷新页面，但是它会刷新到页面顶部，我需要不更改页面位置！所以这是我现在无法使用的，是meta标签吗？这是我所没有的仍然不刷新必须做错了什么吗？ 这是我本来的… 阅读了一些初始答案后，我将其更改为… 问题答案： 更新 您可以使用下面提到的方法代替下面的强制技巧。 将HTML替换为：
-
本文向大家介绍页面刷新时记住滚动条的位置jquery代码，包括了页面刷新时记住滚动条的位置jquery代码的使用技巧和注意事项，需要的朋友参考一下 @*点击按钮页面刷新的时候 记住滚动条的位置*@
-
本文向大家介绍js实现滚动条滚动到某个位置便自动定位某个tr，包括了js实现滚动条滚动到某个位置便自动定位某个tr的使用技巧和注意事项，需要的朋友参考一下 要实现带滚动条的table，定位到某个tr，其实是很简单的，只有几行js代码就可以完成，具体内容如下 js代码 html 效果图： 虽说是几行代码，但要彻底弄懂。要熟悉animate的使用，scrollTop，.offsetTop的意思方可得心
-
本文向大家介绍js实现滚动条滚动到页面底部继续加载，包括了js实现滚动条滚动到页面底部继续加载的使用技巧和注意事项，需要的朋友参考一下 这个实例应该说可以很简单，直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理，遇到一些小知识点可以分析一下也算有所得。 原理很简单，就是为window添加一个scroll事件，浏览器每次触发scroll事件时判断是否滚动到了浏览器底部，如果
-
本文向大家介绍JS实现的页面自定义滚动条效果，包括了JS实现的页面自定义滚动条效果的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动，滚动条滚动。html结构很简单，mainBox是外层div，conten
-
本文向大家介绍jQuery实现滚动条滚动到子元素位置（方便定位），包括了jQuery实现滚动条滚动到子元素位置（方便定位）的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看代码： jQuery: 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！