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

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

js代码实现:

        function KeepScrollBar() {
            var scrollPos;
            if (typeof window.pageYOffset != ‘undefined‘) {
                scrollPos = window.pageYOffset;
            }
            else if (typeof document.body != ‘undefined‘) {
            scrollPos = document.getElementById(‘divContent‘).scrollTop;
            }
        document.cookie = "scrollTop=" + scrollPos; //スクロールバーの位置をcookiesに保存する
        }

        window.onload = function () {
            if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
                var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookiesに値があれば、スクロールバーの位置を読み込み
                document.getElementById(‘divContent‘).scrollTop = parseInt(arr[1]);
            }
        }

 html代码:

   <div id="divContent" style="margin: 7px 0px; clear: both; overflow: scroll; overflow-x: hidden;
            text-align: left; width: 1340px; padding: 0px 10px 0px 0px;" onscroll= "KeepScrollBar()">

  

 

时间: 2024-10-20 13:50:55

js实现div滚动条在页面刷新 滚动条位置固定的相关文章

页面刷新滚动条位置不变

今天因为这个问题困扰了很久网上的例子都尝试没效果,后来发现一点原来是内容最外层没有div的原因 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SpotChkDetail.aspx.cs" Inherits="Topevery.DUM.Web.Observer.SpotChkDetail" %> 2 3 <script runat=&qu

JS实现div块的拖放,调换位置

主要是HTML5 的拖放(Drag 和 Drop) 例子(不需要对div设置ID): <!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } var srcdiv = null; function drag(ev,divdom) { srcdiv=divdom; ev.data

如何让DIV模块随着页面固定和不固定随意切换

最近做公司官网,左边文章列表,右边文章详情,要求左边文章列表随着页面向上滚动到某个位置时,固定在页面顶部,当滚动到footer出现时,div模块随页面滚动而不再固定在顶部. 思路: 1,给外层的div设置position:relative; 2,判断div块到达页面顶部时,设置fixed固定属性 3,判断左边div块的距离滚动条顶部的距离 + 左div块的高度 >= 右边文章详情距滚动条顶部的距离 + 详情页的高度, 改变div块的bottom  top设为auto 4,判断左边div块的距离滚

[转载]js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

转载自:http://www.cnblogs.com/rainbow661314/p/3317106.html js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight && window.scrollMaxY) {    // Mozilla scrW = window.innerWidth + window.scrollMaxX; scrH = w

js 页面无滚动条添加滚轮事件

当页面无滚动条时,滑动滚轮时window.onscroll事件不会相应,此时应该去添加滚轮事件 var MouseWheelHandler=function(e){ e.preventDefault(); e=window.event||e; var value; if(e.wheelDelta) value=e.wheelDelta; else if(e.detail) value=-e.detail; } var addMouseWheelHandler=function(){ if(doc

js在一定时间内跳转页面及各种页面刷新

1.js 代码: <SCRIPT LANGUAGE="JavaScript"> var time = 5; //时间,秒 var timelong = 0; function diplaytime(){ //时间递减 document.all.his.innerHTML = time -timelong ; timelong ++; } function redirect(){ //跳转页 //history.back(); window.location.href=&qu

关于在IE浏览器中,文档模式为&quot;杂项&quot;即Quirks,position为absolute且页面有滚动条时设置right的问题

由于系统的html页面没有指定相应的DTD,即<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">或<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

div随页面滚动遇顶固定的两种方法(js&amp;jQuery)

一.遇顶固定的例子 我一直以为是某个div或层随屏幕滚动,遇顶则固定,离开浏览器顶部又还原这样的例子其实不少,其实它的名字叫"层的智能浮动效果".目前我们在国内的商业网站上就常常看到这样的效果了.例如淘宝网的搜索结果页的排序水平条,在默认状态时,该工具条是跟随页面滚动的,如下图: 而当我们下拉滚动条,随着页面向下滚动,当此工具条接触到浏览器的上边缘时,这时就会独立出来固定在顶部,不跟随页面滚动而滚动了,如下图: 类似的例子效果我们在别的网站上都有看到过,例如腾讯微博首页上,当我们下拉屏

js 返回上一页和刷新以及页面跳转

1. Javascript 返回上一页history.go(-1), 返回两个页面: history.go(-2); 2. history.back(). 3. window.history.forward()返回下一页 4. window.history.go(返回第几页,也可以使用访问过的URL) 例: <a href="javascript:history.go(-1);">向上一页</a> response.Write("<script