实验环境：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. flock - 必应词典

    flock - 必应词典 美[flɑk]英[flɒk] v.聚集:群集:蜂拥 n.(羊或鸟)群:(尤指同类人的)一大群 网络羊群:大量:羊群,一群 变形复数:flocks:过去分词:flocked:现 ...

  2. 20175126《Java程序设计》第三学习总结

    # 20175126 2016-2017-2 <Java程序设计>第三周学习总结 ##课余收获——利用JAVA编写最简单的斗地主程序 -由于最近身边的朋友都在玩手机上的斗地主小游戏,我也就 ...

  3. 记一次git翻车事件

    昨天dmp上线了 本来整个流程是 1.在本地1.4分支开发,开发完成push到origin/1.4,在远程仓库把1.4 merge到master分支 2.本地online分支先pull一下远程onli ...

  4. 探索未知种族之osg类生物---渲染遍历之Renderer::draw()简介

    我们今天进入上一节的遗留问题Renderer::draw()的探究. 1.从_drawQueue中取出其中一个sceneView对象.SceneView是对scene和view类的封装,通过他可以方便 ...

  5. 使用Typescript实现依赖注入（DI）

    前言DI总是和ico相辅相成的,如果想对DI有更多的了解,可以移步我的另一篇文章 依赖注入(DI)和控制反转(IOC),再次我就不多做赘述了. 前几天看见一道面试题,今天借这个话题想跟大家分享一下: ...

  6. tomcat简单使用

    下载解压tomcat[root@localhost]# tar zxf apache-tomcat-8.5.4.tar.gz -C /usr/local/tomcat yum自带JDK,注意区别JRE ...

  7. 记录学习WeakReference发现的问题

    在学习ThreadLocal时发现ThreadLocalMap里的Entry使用到了WeakReference,所以重新学习WeakReference 查看相关博客例如: https://blog.c ...

  8. idea debug快捷键 快速查找类

    快速查找类或者文件比如xml .txt Ctrl + Shift + N 快速查找类 双击Shift 选中代码右移 Tab 选中代码左移 Shift + Tab 选中代码上下移 Shift + Alt ...

  9. Flask cookie

    一 什么是cookie        什么是cookie?如果单单从数据结构的角度来说,它可以被理解成用来保存数据的一个dictionary,由一组组键值对组成.如果从作用上来说,我们知道Http协议 ...

  10. mac mysql5.7.17修改root初始密码（知道初始密码）

    最近在mac上装个mysql可以说是麻烦死了,在这里就说说修改初始密码吧! 刚开始的时候不知道怎么修改,于是上网百度,网上几乎都是说要先执行命令mysqld_safe --skip-grant-tab ...