实验环境：vs2015 asp.net(C#)

主要原理：

1.在页面滚动时或点击按钮时将当前滚动条位置记录到cookie[pos]，

2.页面刷新或重载时查询cookie[pos]中的值是否存在，若存在根据该值给滚动条定位

.aspx文件

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test.aspx.cs" Inherits="test" %>

<!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>

    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/MyStyleSheet.css" />

</head>

<body onscroll="aa()">

    <form id="form1" runat="server">

        <div>

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <br />

            <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="aa()" />

            <div style="height: 600px" runat="server">

            </div>

            <asp:Button ID="Button3" runat="server" Text="Button" OnClientClick="aa()" /> 
　　　　</div>
　　 </form> 
</body>
 </html>

js代码

注意点：若页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement.scrollTop获取滚动条滚动高度，若页面没有DTD，即没指定DOCTYPE时，使用document.body.scrollTop获取滚动条高度。如果在页面制定了DTD时使用document.body.scrollTop则取值一直为0。

 <script>　　　　

         function getCookie(c_name) {

         //从cookie中获取滚动条距离顶端位置

             if (document.cookie.length > 0) {

                 var aCookie = document.cookie.split(";");

                 for (var i = 0; i < aCookie.length; i++) {

                     var aCrumb = aCookie[i].split("=");

                     if (aCrumb[0] == c_name) {

                         return unescape(aCrumb[1]);

                     }

                 }

             }

             return ""

         }

         function setCookie(c_name, value) {

         //给cookie赋值

             document.cookie = c_name + "=" + escape(value) + ";";

         }

         function aa() {

             //页面指定了DTD，即指定了DOCTYPE时，使用document.documentElement。

             //页面没有DTD，即没指定DOCTYPE时，使用document.body。

             setCookie("pos", document.documentElement.scrollTop)

         }

         function checkMe() {

 　　　　　　//给scrollTop赋值

             if (getCookie("pos") != "") {

                 document.documentElement.scrollTop = getCookie("pos") + "px"

             }

         }

         checkMe()

     </script>
 

JavaScript实现页面刷新滚动条位置不变（利用cookie）的更多相关文章

  1. js实现div滚动条在页面刷新 滚动条位置固定

    思想:1.通过div的onscroll事件记录滚动条的scrollTop值,设置到document.cookie 2.页面加载时再读取document.cookie的值,设置给div的scrollTo ...

  2. JavaScript禁用页面刷新

    JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...

  3. JQuery实现页面刷新滚动条自动滚动到特定位置

    var cotentOffset = $('#6f').offset(); $('.info_box').animate({ scrollLeft: cotentOffset.left }, ); 原 ...

  4. 用Javascript获取页面元素的位置

    制作网页的过程中,你有时候需要知道某个元素在网页上的确切位置. 下面的教程总结了Javascript在网页定位方面的相关知识. 一.网页的大小和浏览器窗口的大小 首先,要明确两个基本概念. 一张网页的 ...

  5. asp.net IE 页面刷新固定位置

    MaintainScrollPositionOnPostback="true" 可能我们会经常遇到这种情况,当页面内容比较多的时候,当用户执行操作执行一次页面回送后,页面又重新从顶 ...

  6. html-javascript前端页面刷新重载的方法汇总

    记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...

  7. sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback

    sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...

  8. asp.net页面刷新或者回发后DIV的滚动条位置不变！（转）

    源文件:http://www.cnblogs.com/nyth/archive/2011/06/10/2077868.html 当把数据放在div里面,然后给div设置Scroll显示,在页面刷新后或 ...

  9. JS刷新页面后滚动条的位置不变

    有时候,在网页中点击了页面中的按钮或是刷新了页面后,页面滚动条又 会回到顶部,想看后面的记录就又要拖动滚动条,或者要按翻页键,非常不方便,想在提交页面或者在页面刷新的时候仍然保持滚动条的位置不变,最好 ...

随机推荐

  1. IIS 设置查询字符串长度

  2. npm 离线安装依赖

    现实场景:一台自己的电脑可以连外网,一台开发机不能连网,开发机需要安装node_modules 依赖解决办法:       npm 安装依赖分为两种,一是 -g  这种是安装在全局环境的,只有在电脑中 ...

  3. java基础 -- 经典排序

    ----  冒泡排序 方法: 1.每次比较相邻的两个数 2. 小的交换在前面 3.每轮结束后最大的数交换到最后 代码实现: /* * 冒泡排序 * */ public class SortNum { ...

  4. 4-16 css

    1.背景是图片 <style> body {background-image:url('bgdesert.jpg');} </style> 2. 十六进制 - 如:" ...

  5. @Autowired注解和静态方法

    @Autowired注解入static属性时,出现NullPointerException异常. 使用构造方法可解决: @Component public class Test { private s ...

  6. jmeter在几个固定的字符串中，随机取其中之一的方法

    在测试过程中遇到上送字段必需是几个固定值中的一个, 使用读取文件中几个固定值,然后随机在这几个固定值中选择的办法解决问题 __CSVRead() CSV file to get values from ...

  7. CentOS7.2 1511部署RabbitMQ

    一.安装RabbitMQ依赖的的Erlang最小支持包(当然也可以安装完整的Erlang) 1.下载RabbitMQ的Erlang最小支持包源文件 git clone https://github.c ...

  8. echarts - 条形图grid设置距离绘图区域的距离

    在一些数据量过大的情况下,在一个固定的区域绘图往往需要对图表绘制区域的大小进行动态改变.这时候设置条形图距离绘图区域上下左右的距离可使用如下方式:表示条形图的柱子距离绘图区左边30%,距离右边40%, ...

  9. PyCharm中 Django1.11配置Mysql数据库

    1.Django 中配置MySQL数据库 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': '数据库名称 ...

  10. c#Dapper mysql按时间段查询和过滤

    #endregion /// <summary> /// 根据条件获取集合 /// </summary> /// <param name="id"&g ...