Javascript 如何用HTML在页面上的特定点打开网站?
初学者程序员所以道歉,如果这是真的很明显 如何让我的网站在页面上的特定点打开(HTML) 我到处都找不到这叫什么!不锚等。该网站将比大多数屏幕更宽和更长我希望屏幕/视口在2500x2500像素背景的正中心打开 我在Mac OS X 10上的DreamWeaver CC中工作 提前谢谢Javascript 如何用HTML在页面上的特定点打开网站?,javascript,html,navigation,mouse,dreamweaver,Javascript,Html,Navigation,Mouse,Dreamweaver,初学者程序员所以道歉,如果这是真的很明显 如何让我的网站在页面上的特定点打开(HTML) 我到处都找不到这叫什么!不锚等。该网站将比大多数屏幕更宽和更长我希望屏幕/视口在2500x2500像素背景的正中心打开 我在Mac OS X 10上的DreamWeaver CC中工作 提前谢谢 p、 没有代码可以发布,这是我第一次调用它,你可以使用$(window.width()&$(window.height())和$(window.height()),它是jQuery代码,因此你必须在网页上的jQue
p、 没有代码可以发布,这是我第一次调用它,你可以使用
$(window.width()
&$(window.height())和$(window.height()
),它是jQuery
代码,因此你必须在网页上的jQuery
库中添加应答器脚本。你能告诉我更多你想做什么吗?我很难理解。你不想要任何锚,但你想要?抱歉不理解。请尝试在页面加载时启动此Javascript
window.onload = function(){
window.scrollTo(1250, 1250);
}
窗口。scrollTo(x-coord,y-coord)
函数采用两个参数,x-coord是沿文档水平轴的像素,您希望显示在左上角,y-coord是沿文档垂直轴的像素,您希望显示在左上角
我选了1250个,因为这是2500除以2,但是如果你想要屏幕中间的那个位置,你可能需要稍微调整一下。你必须得到屏幕的视口并做一些数学运算
(提示:window.innerWidth
和window.innerHeight
提供尺寸,包括document.documentElement.clientWidth
和document.documentElement.clientHeight
不带滚动条)
window.scrollTo()
的文档如下:
有关视口尺寸的一些信息可以在此处找到:正如bryguy所说,您可以计算屏幕的中心并使用scrollTo()。或者,如果要滚动到某个特定元素,请为该元素指定一个id并使用scrollIntoView()函数。您还可以将不可见div居中,绝对定位div,并将顶部和左侧的值设置为50%:
HTML
您可以在没有jQuery的情况下完成这项工作。您可以使用本机JavaScript函数window.scrollTo()
滚动到中心
要计算屏幕中心,您只需执行以下操作:
用于垂直中心
- 确定视口高度:视口高度存储在
document.documentElement.clientHeight
中
- 确定整个文档的高度:可以使用
document.documentElement.offsetHeight
或document.body.scrollHeight
来获取整个文档的高度
- 计算:现在只需从文档高度中减去视口高度,然后将其除以2,如下所示:
(document.documentElement.offsetHeight-document.documentElement.clientHeight)/2
用于水平中心
- 确定视口的宽度:视口的宽度存储在
document.documentElement.clientWidth
中
- 确定整个文档的宽度:可以使用
document.body.scrollWidth
来完成此操作
- 计算:现在只需从文档宽度中减去视口宽度,然后将其除以2,如下所示:
(document.body.scrollWidth-document.documentElement.clientWidth)/2
现在是滚动的时候了
最后,您需要使窗口滚动到计算点
window.scrollTo(centerWidth, centerHeight);
如果您想在一个步骤中完成所有操作,请执行以下操作:
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );
请注意,我们使用了document.documentElement.clientHeight(和clientWidth),它们提供了不带滚动条的视口大小。如果希望包含滚动条,则必须使用其他变量。您可以在互联网上找到如何获取这些测量值的示例
有关更多信息:
window.scrollTo(centerWidth, centerHeight);
window.scrollTo( (document.body.scrollWidth - document.documentElement.clientWidth)/2, (document.body.scrollHeight - document.documentElement.clientHeight)/2 );