求下关于window对象一个定位问题

constanine_xia 2013-08-24 01:04:02
最近想玩js.然后发现个问题。
如何能得知window中心的当前定位，比如body有1200px。然后滚动了300px，如果得知我已经滚动了300px呢。或者怎么得知当前window与body的上边距差？
...全文
161 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
constanine_xia 2013-09-02
  • 打赏
  • 举报
 回复
烂尾楼啊。。。。
constanine_xia 2013-08-27
  • 打赏
  • 举报
 回复
我现在是不知道如何得知当前屏幕的Top边距与html显示的整个body的top边距的差
constanine_xia 2013-08-27
  • 打赏
  • 举报
 回复
引用 7 楼 zzgzzg00 的回复:
你是想做类似跳转到某行的功能吧？ var trstyle=ZTool.getDomStyle(tr); var screenStyle=ZTool.getScreenStyle(); var detop=trstyle.top-screenStyle.height; var de=document.documentElement||document.body; if(detop>0){ de.scrollTop=detop+0.5*screenStyle.height; }else{ de.scrollTop=0; } 这样试试 获取屏幕的高度和元素的位置的方法自己写下
这个能解释下吗？ZTool..是插件吗？没查到过啊。。。
似梦飞花 2013-08-26
  • 打赏
  • 举报
 回复
你是想做类似跳转到某行的功能吧？ var trstyle=ZTool.getDomStyle(tr); var screenStyle=ZTool.getScreenStyle(); var detop=trstyle.top-screenStyle.height; var de=document.documentElement||document.body; if(detop>0){ de.scrollTop=detop+0.5*screenStyle.height; }else{ de.scrollTop=0; } 这样试试 获取屏幕的高度和元素的位置的方法自己写下
constanine_xia 2013-08-26
  • 打赏
  • 举报
 回复
代码贴错了。。。这个才是：
<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <style>
    .selectd{
    border:solid 1px blue;
    background-color:#Fa13b1;
    color:Yellow;
    }
    .unselected{
    background-color:white;
    color:black;
    }
    #inputdiv{
    border:solid 1px #00dbac;
    position:fixed;
    left:70%;
    }
    #content{
    padding:20px;
    border:solid 1px #00aaac;
    }
      
    </style>
      
    <script>
        var words;
        var env;
        var content;
        var scrollY = 0;
        var direction=0
        function select(){
              
            words=document.getElementById('intxt').value;
            if(words.length>=3){
                setblack();
                serach(words);
            }
        }
          
        function setblack(){
            var as=document.getElementsByTagName('span');
            for(var i=0;i<as.length;i++){
            as[i].className="unselected";        
            }
        }
        function serach(words){            
            env=document.getElementById(words);
              
            if(env == null){
                alert("没有"+words+"这个栏目")
            }else{
                if(env.offsetTop>= scrollY +100){
                    direction=0;
                }else if(env.offsetTop<=scrollY-100){
                    direction=1;
                }
                    scrollWindow();
                    var name=document.getElementById(words+'_name');
                    name.className="selectd";        
            }
          
        }
          
          
        function scrollWindow()
        {//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，
 
还有许多广告代码下载。
            if (direction == 0)
        {
              
            if ( env.offsetTop>= scrollY +100){
                window.scrollBy(0,+10);
                scrollY=scrollY + 10;        
            }else{
                clearTimeout(srcoll);
            }    
        }
        else{
              
            if ( env.offsetTop<=scrollY){
                window.scrollBy(0,-10);
                scrollY=scrollY - 10;
            }else{
                clearTimeout(srcoll);
            }
        }        
      var srcoll=setTimeout("scrollWindow()", 10);
      }//欢迎来到站 
    </script>
    </head>
    <body>
    <div id="inputdiv">
    <input type="text" id="intxt" /><br />
    <a href="javascript:void(0)" onclick="select();">turn in</a>
    </div>
    <div id="content">
    <div id="constanine"><span id="constanine_name">constanine</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="smith"><span id="smith_name">smith</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="breake"><span id="breake_name">breake</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="tom"><span id="tom_name">Tom</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    <div id="aclie"><span id="aclie_name">aclie</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="john"><span id="john_name">john</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div>  
    <div id="jack"><span id="jack_name">jack</span>
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br />
    *************************************************<br /><br /><br />
    </div> 
    </div>
    </body>
    </html>
constanine_xia 2013-08-26
  • 打赏
  • 举报
 回复
引用 1 楼 zzgzzg00 的回复:
var de=dcouemnt.documentElement||document.body de.scrollTop试试
这个试过了。没用。现在。我的想法是要么，能找到window的与body，高度差的属性（貌似没。。。），另外就是给window,加个监听。。。onsrcoll，然后内置一个变量记录滚动的数值，初始为0,向下滚动则变量数值增加，向上滚动则变量数值减少，但如果用监听，怎么做到我的滚动，数值变动监听精确？求指教
constanine_xia 2013-08-26
  • 打赏
  • 举报
 回复
就是类似锚点跳转。。。。因为锚点跳转是瞬间就完成了，想有个滚动的动画过程，这个是代码例子：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style>
.selectd{
border:solid 1px blue;
background-color:#Fa13b1;
color:Yellow;
}
.unselected{
border:solid 1px black;
background-color:white;
color:black;
}
#inputdiv{
position:fixed;
left:800px;
}

</style>

<script>
	var words;
	function select(){
		alert(window.scrollTop);
	    words=document.getElementById('intxt').value;
		if(words.length>=3){
			setblack();
			serach(words);
		}
	}
	
	function setblack(){
		var as=document.getElementsByTagName('span');
		for(var i=0;i<as.length;i++){
		as[i].className="unselected";		
		}
	}
	
	function serach(words){
		var env=document.getElementById(words);
		env.scrollIntoView();
		var name=document.getElementById(words+'_name');
		name.className="selectd";		
	}
	
</script>
</head>
<body>
<div id="inputdiv">
<input type="text" id="intxt" /><br />
<a href="javascript:void(0)" onclick="select();">turn in</a>
</div>
<div>
<a id="constanine"></a><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />

<a id="smith"></a><span id="smith_name">smith</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />

<a id="breake"></a><span id="breake_name">breake</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />

<a id="tom"></a><span id="constanine_name">constanine</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
<a id="aclie"></a><span id="aclie_name">aclie</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />

<a id="john"></a><span id="john_name">john</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />

<a id="jack"></a><span id="jack_name">jack</span>
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br />
*************************************************<br /><br /><br />
</div>
</body>
</html>
这个开始如果不现滚动，完全搞辅助的收索框，那么滚动定位是靠谱的，但是如果window本身被滚动过了。那么就无法再次精确定位了
街头小贩 2013-08-24
  • 打赏
  • 举报
 回复
不明白楼主表述的内容
licip 2013-08-24
  • 打赏
  • 举报
 回复
你用jquery中写的方法吧，是可以很容易实现的
似梦飞花 2013-08-24
  • 打赏
  • 举报
 回复
var de=dcouemnt.documentElement||document.body de.scrollTop试试
107个常用Javascript语句
107个常用Javascript语句
java获取浏览器window对象_JS window对象详解
window 是客户端浏览器对象模型的基类，window 对象是客户端 JavaScript 的全局对象。一个 window 对象实际上就是一个独立的窗口，对于框架页面来说，浏览器窗口每个框架都包含一个 window 对象。全局作用域在客户端浏览器中，window 对象是访问 BOM 的接口，如引用 document 对象的 document 属性，引用自身的 window 和 self 属性等。...
JavaScript Window窗口对象
文章目录一、Window对象概述1、Window对象属性2、Window对象方法3、如何使用二、对话框1、警告对话框2、确认对话框3、提示对话框三、打开与关闭窗口1、打开窗口2、关闭窗口（1）关闭当前窗口（2）关闭子窗口四、控制窗口1、移动窗口2、窗口滚动3、改变窗口大小4、访问窗口历史5、设置超时五、窗口事件1、通用窗口事件2、扩展窗口事件 一、Window对象概述 Window对象可以用来打...
打开/跳转一个链接：window.open和window.location
1.window对象 window对象表示浏览器中打开的窗口。 如果文档中包含框架（<frame>或<iframe>标签），浏览器会为HTML文档创建一个window对象。 2. window.location location对象是window对象的一部分，也可以说是window的一个属性，location对象包含有关当前URL的信息。 修改location属性是替换当页，也就是重定位当前页。 3. window.open open()是window对象的方法 window.ope
window的五个子对象
转载自 https://www.php.cn/js-tutorial-368266.html （1）Location 对象 Location 对象包含有关当前 URL(统一资源定位符) 的信息。（Uniform Resource Location） Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。 location.hostname 返回当前 URL 的主机名。 location.pathname 返回当前 URL 的路径部分。 location.
JavaScript

87,991

社区成员

224,687

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章