zoukankan      html  css  js  c++  java
  • js设置滚动条位置

    JS控制滚动条的位置:

    window.scrollTo(x,y);
    
    竖向滚动条置顶(window.scrollTo(0,0);
    竖向滚动条置底 window.scrollTo(0,document.body.scrollHeight);
    
    JS控制TextArea滚动条自动滚动到最下部
    
    document.getElementById('textarea').scrollTop = document.getElementById('textarea').scrollHeight;
    
     
    
    iframe中操作父级滚动条
    
    window.parent.scrollTo(x,y);
    
    注意:iframe中的地址和父级地址必须一致,就是要和父级在同一个文件夹
    
    否则,js会报错
    
     
    
    下面是通过javascript设置cookie记录滚动条位置
    <HTML>
    <HEAD>
    <TITLE> 记录滚动条位置 </TITLE>
    <script language="javascript">
    function SetCookie(sName, sValue)
    {
       date = new Date();
       s = date.getDate();
       date.setDate(s+1);    //设置cookie的有效期
       document.cookie = sName + "=" + escape(sValue) + "; expires=" + date.toGMTString();//创建cookie
    }
    function GetCookie(sName)
    {
       var aCookie = document.cookie.split("; "); //将cookie中的数据切割成数组,方便遍历
       for (var i=0; i < aCookie.length; i++)      //遍历cookie中的数据
       {
       var aCrumb = aCookie[i].split("=");         //将键和值分开
       if (sName == aCrumb[0]) {                   //判断是否是指定的键
        return unescape(aCrumb[1]);}            //返回键对应的值
       }
       return null;
    }
    function winLoad()
    {
       document.body.scrollLeft = GetCookie("scrollLeft");//获取水平滚动条位置
       document.body.scrollTop = GetCookie("scrollTop"); //获取垂直滚动条位置
    }
    function winUnload()
    {
       SetCookie("scrollLeft", document.body.scrollLeft) //保存水平滚动条位置
       SetCookie("scrollTop", document.body.scrollTop)    //保存垂直滚动条位置
    }
    window.onload = winLoad;                               //加载页面时自动执行获取cookie保存值的方法
    window.onunload = winUnload;                           //关闭页面时自动执行保存cookie的方法
    </script>
    </HEAD>
    <BODY>
    
    </BODY>
    </HTML>

    JQUERY控制滚动条位置

    var scrollTop = $(window).scrollTop();   
    $(window).scrollTop(scrollTop);//保持滚动条距离底部0px 
     
  • 相关阅读:
    synchronized内置锁
    《JavaScript闯关记》视频版硬广
    想提高团队技术,来试试这个套路!
    从国企到阿里的面试经历(二)
    从国企到阿里的面试经历(一)
    《JavaScript 闯关记》之垃圾回收和内存管理
    《JavaScript 闯关记》之原型及原型链
    《JavaScript 闯关记》之作用域和闭包
    如何排版 微信公众号「代码块」之 MarkEditor
    《JavaScript 闯关记》之事件
  • 原文地址:https://www.cnblogs.com/oospace/p/4267037.html
Copyright © 2011-2022 走看看