js和jquery获取文档对象以及滚动条位置

时间:2021-08-24 09:17:27

<div style="width:120px;height:120px;border:1px solid red; position:absolute; left:800px; top:100px; z-index:1001;" id="AdminUserStateDiv">
        
        </div>
        <div class="div1">层1</div>
<div class="div2">层2</div>
   <style type="text/css">
        .div1{
   
    width:2000px;
    height:2000px;
    }

.div2{
    background-color:#33FF66;
    width:100px;
    height:100px;
    position:fixed;
    left:50px;
    top:50px;
    }
    </style>

<script type="text/javascript">

var UpdateSaleEnable = function (sel) {
        var optVal = $(sel).val();
        var id = $(sel).attr("id").split('_')[1];
        // alert(optVal + "--------" + id);
        //        $.ajax({
        //            type: 'post',
        //            url: "/System/DetailSaleInfoState", //Controller和action地址
        //            data: 'id=' + id + '&enableid=' + optVal, //参数
        //            success: function (data) {
        //                alert(data.message); //confirm
        //            },
        //            error: function (err) { alert(Promotions.messages.yichangcuowu); }
        //        });

$.ajax({
            url: "/System/DetailSaleInfoState",
            async: true,
            data: { id: id, enableid: optVal },
            type: "Post",
            dataType: "json",
            beforeSend: function () {
            },
            success: function (dataT) {
                alert(dataT.message);
            },
            error: function (er) {
                alert(er);
            }

});

}

var showAdminUser = function (obj) {
        var offSet = $(obj).offset();
        var docTop = offSet.top;    //当前元素相对文档top偏移位置
        var docLeft = offSet.left;  //当前元素相对文档left偏移位置

var docWidth = $(document).width(); //整个页面文档的宽度
        var docHeight = $(document).height();   //整个页面文档的高度
        var dScrollTop = $(document).scrollTop(); //整个文档滚动条相对top位置
        var wScrollTop = $(window).scrollTop(); //整个屏幕滚动条相对top位置
        var winWidth = $(window).width(); //整个屏幕宽度
        var winHeight = $(window).height();//整个屏幕高度

alert("docWidth: " + docWidth + "——" + "docHeight:" + docHeight + " dScrollTop:" + dScrollTop);

var dWidth = document.body.offsetWidth;  //纯javascript整个页面文档的宽度
        var hHeight = document.body.offsetHeight;   //纯javascript整个页面文档的高度
        var scrollTop = document.body.scrollTop + document.documentElement.scrollTop
        alert(" docWidth: " + dWidth + " docHeight: " + hHeight + " : " + scrollTop);

}
    $(document).ready(function () {

$(window).scroll(function () {

var scrollTop = $(document).scrollTop();
            //alert(scrollTop);

var AdminUserStateDiv = $("#AdminUserStateDiv");
            //AdminUserStateDiv.css("top", scrollTop + "px");
            AdminUserStateDiv.animate({ "top": scrollTop + "px" }, 0);
            //$("#scrollUl").animate({ "marginLeft": scrollposition + "px" }, 10);

})
    });

</script>

<style type="text/css">
#back-to-top{height:24px}
p#back-to-top a span{margin-bottom:2px;}
p#back-to-top a span {border-radius:0;}
</style>
<div class="suggest" style="position:fixed; height:104px; bottom:100px; float:left; display:none; ">
    <div class="suggestLeft" style="float:left;">
        <p  flag='0' id='myClose' style="display:block;left: 1126.5px; ">
            <a href="javascript:showAdvice();">
            <span style=" background:url('http://88db.cn/cn/html/advice/images/right-bg.jpg') no-repeat scroll 0px 0px; display:block; height:60px;line-height: 14px;overflow: hidden;width:23px;float:left;padding:20px 0 0 2px;color: #FF6600;text-align: center;text-decoration: none">意见反馈</span>
            </a>
        </p>
        <p id="back-to-top" >
            <a href="#top">
            <span  style="background:url('http://88db.cn/cn/html/advice/images/right-bg.jpg') no-repeat scroll -25px -80px; display:block; height: 24px;overflow: hidden;padding-top:0;width:25px">
            </span>
            </a>
        </p>
    </div>
</div>

<script type="text/javascript">
    //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失

var width = $(document).width();
    //alert("widt:"+width);

var offleft = width - 26;
    if ($.browser.msie && ($.browser.version == "6.0")) {
        //alert("ie6");
        $("#back-to-top").css("position", "absolute");
        $("#myClose").css("position", "absolute");
    }
    if ($.browser.msie) {
        offleft = width - 47;
    }

$(document).ready(function () {

//var offleft = width-47; //(width-990)/2+990;

$(".suggest").css("left", offleft + "px");
        setTimeout($(".suggest").css("display", "block"), 10);
        $("#back-to-top").css("left", offleft + "px");
        $("#myClose").css("left", offleft + "px");

/****/
        //alert("left4");

//        $(window).scroll(function () {
//            //alert("java");/****/
//            if ($(window).scrollTop() > 100) {
//                //width = $(document).width();
//                //alert("widt:"+width);
//                //offleft = width-40; //(width-990)/2+990; //25是反馈意见框的宽度

//                //$(".suggest").css("left",offleft+"px");

//                $("#back-to-top").fadeIn(500);
//                //$(".suggest").fadeIn(500);
//            } else {
//                $("#back-to-top").fadeOut(500);
//                //$(".suggest").fadeOut(500);
//            }

//            if ($.browser.msie && ($.browser.version == "6.0")) {
//                var y = $(window).scrollTop() + 400;
//                var backToY = y + 80;
//                $("#back-to-top").css("top", backToY + "px");
//                $("#myClose").css("top", y + "px");
//            }

//        });
        //当点击跳转链接后,回到页面顶部位置
        $("#back-to-top").click(function () {
            $('body,html').animate({ scrollTop: 0 }, 100);
            return false;
        });
    });
    /****/
</script>
<!--回到顶部结束-->

js和jquery获取文档对象以及滚动条位置的更多相关文章

  1. js、jQuery 获取文档、窗口、元素的各种值

    基于两年开发经验,总结了 javascript.jQuery 获取窗口.文档.元素的各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body的宽度: docu ...

  2. jquery获取文档高度和窗口高度的例子

    jquery获取文档高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  3. jquery获取文档高度和窗口高度汇总

    jquery获取窗口高度和窗口高度,$(document).height().$(window).height() $(document).height():整个网页的文档高度 $(window).h ...

  4. js和jQuery获取各种屏幕或文档的高度和宽度

    1.jQuery获取文档或屏幕的高度 console.log($(window).height());//浏览器页面当前屏幕可见区域的高度 console.log($(document).height ...

  5. 数组对象元素的添加,String对象,BOM对象以及文档对象的获取

    数组对象的删除有三种方法: pop();        //移除最后一个元素并返回该元素值shift();      //移除最前一个元素并返回该元素值,数组中元素自动前移splice(0,2); / ...

  6. JS第二部分--DOM文档对象模型

    一.DOM的概念 二.DOM可以做什么 三.DOM对象的获取 四.事件的介绍 五.DOM节点标签样式属性的操作 六.DOM节点对象对值的操作 七.DOM节点-标签属性的操作(例如id class sr ...

  7. js 和 jquery 获取页面和滚动条的高度 视口高度文档高度

    js 和 jquery 获取页面和滚动条的高度 //页面位置及窗口大小 function GetPageSize() { var scrW, scrH; if(window.innerHeight & ...

  8. jquery&period;cookie 使用文档,&dollar;&period;cookie&lpar;&rpar; 文档教程, js 操作 cookie 教程文档。

    jquery.cookie 使用文档,$.cookie() 文档教程, js 操作 cookie 教程文档. jquery.cookie中的操作: jquery.cookie.js是一个基于jquer ...

  9. 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML&comma;读取该元素 包含的文本信息

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 图片拾取器-PicPicker

    最近报名参加了360前端星计划,想当一名前端实习生,学习更多更流行的前端知识.然后需要完成一个作业,才能进培训,进了培训还得看运气才能留下,流程不少.书归正传,请看: 课后作业题目 请从下面两个题目中 ...

  2. &lbrack;linux系统&rsqb;--crontab定时任务

    基本格式 : * * * * * command 分 时 日 月 周 命令 第1列表示分钟1-59 每分钟用*或者 */1表示 第2列表示小时1-23(0表示0点) 第3列表示日期1-31 第4列表示 ...

  3. 关于log4j的讨论

    1.LoggersLoggers组件在此系统中被分为五个级别:DEBUG.INFO.WARN.ERROR和FATAL.这五个级别是有顺序的,DEBUG < INFO < WARN < ...

  4. VBA控件ListBox的BoundColumn和TextColumn用法,Value和Text的用法

    在使用Excel编写VBA程序时,用到ListBox,然后研究了下它的所有属性.其实这个控件功能很不好用,太老了,最重要的是还不支持鼠标滚轮,很不好操作,但是考虑到兼容性,还是使用它. 其实读取.写入 ...

  5. 基础拾遗----RabbitMQ(含封装类库源码)

    基础拾遗 基础拾遗------特性详解 基础拾遗------webservice详解 基础拾遗------redis详解 基础拾遗------反射详解 基础拾遗------委托详解 基础拾遗----- ...

  6. 【2&period;0】SpringBoot多环境yml文件配置

    一.使用Spring Boot Profiles 1. 使用yml文件 首先,我们先创建一个名为 application.yml的属性文件,如下: server: port: 8080 my: nam ...

  7. JSP &colon;使用&lt&semi;&percnt;&commat;include&percnt;&gt&semi;报Duplicate local variable path 错误

    今天在做商城页面,遇到问题: <%@include file="menu.jsp" %> 错误提示: Multiple annotations found at thi ...

  8. Codeforces 711E ZS and The Birthday Paradox 数学

    ZS and The Birthday Paradox 感觉里面有好多技巧.. #include<bits/stdc++.h> #define LL long long #define f ...

  9. Hive中的三种不同的数据导出方式介绍

    问题导读:1.导出本地文件系统和hdfs文件系统区别是什么?2.带有local命令是指导出本地还是hdfs文件系统?3.hive中,使用的insert与传统数据库insert的区别是什么?4.导出数据 ...

  10. magento -- 给Magento提速之缓存上的探索

    依然在为Magento提速做努力,除了自带的缓存和编译,之前的所作的很多努力都是从减少JS,Css,图片等载入时间入手,而对页面载入耗时最早有时也是最大的一部分--获取页面数据没有做太多处理,以gap ...