实验环境：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. 转：TCP/IP协议（一）网络基础知识

    转载:http://www.cnblogs.com/imyalost/p/6086808.html 参考书籍为<图解tcp/ip>-第五版.这篇随笔,主要内容还是TCP/IP所必备的基础知 ...

  2. 合并回文子串（区间dp）

    链接:https://ac.nowcoder.com/acm/problem/13230来源:牛客网 题目描述 输入两个字符串A和B,合并成一个串C,属于A和B的字符在C中顺序保持不变.如" ...

  3. 这是一个新的开始at this very monment

    简单的介绍下此时自己的情况,和对近几年所做的事做一个总结,并展望下自己的未来和对自己的期待.我会将我的博客分成两种,一个是我的学习笔记,另一个是我的生活记录. 2018年六月底我毕业于一个普通的二本, ...

  4. css样式之input输入框默认样式

    帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...

  5. laravel安装laravel-ide-helper扩展进行代码提示(二)

    一.扩展的地址 https://github.com/barryvdh/laravel-ide-helper 二.安装扩展 1.引入库: composer require barryvdh/larav ...

  6. 【转】重写Equals为什么要同时重写GetHashCode

    .NET程序员都知道,如果我们重写一个类的Equals方法而没有重写GetHashCode,则VS会提示警告 :“***”重写 Object.Equals(object o)但不重写 Object.G ...

  7. linux-kernel-4.4 移植 （2）解决上部遗留DMA-PL330的问题

    查看drivers/tty/serial/samsung.c文件发现,当传输数据量小于ourport->min_dma_size时,不使用DMA,大于等于min_mda_size时才是使用DMA ...

  8. CentOS查询端口占用和清除端口占用的程序

    1.查询端口号占用,根据端口查看进程信息 [root@server2 ~]# lsof -i: COMMAND PID USER FD TYPE DEVICE SIZE NODE NAME httpd ...

  9. python 字典 拼接SQL语句

    def gen_sql(table_name, data):  """ :param table_name: 表名称 :param data: 字典对象 key为字段(要 ...

  10. Shell脚本- 单条命令循环执行重复工作

    关于shell for循环具体详细说明可参考:http://wiki.jikexueyuan.com/project/linux-command/chap34.html example: 分别在com ...