初学者,如果这真的很明显,请道歉!
如何让我的网站在页面上的特定点打开(HTML)?
我在任何地方都找不到这叫什么未锚定等。该网站将比大多数屏幕更宽、更长我希望屏幕/视口在2500x2500像素背景的中心打开。
我在Mac OS X 10 上的DreamWeaver CC工作
提前感谢!!
p.s没有代码可发布,这是我将其整合在一起的第一个停靠港
您可以使用$(window).width()
&$(window).height()
,它是jQuery
代码,所以您必须在网页上的jQuery
库中添加一个应答器脚本。你能告诉我更多你想做什么吗?我很难理解。你不想要任何锚,但你想要?为不理解而道歉。
当页面加载时,尝试使用这段Javascript
window.onload = function(){
window.scrollTo(1250, 1250);
}
window.scrollTo(x-coord,y-coord)
函数采用两个参数,x-coord是要显示在左上角的文档横轴上的像素,y-coord是想要显示在左下角的文档纵轴上的像素。
我选择了1250,因为这是2500除以2,但如果你想要屏幕中间的位置,你可能需要调整一下。你必须得到屏幕的视口并做一些数学运算。
(提示: 有关视口尺寸的一些信息可以在此处找到:http://ryanve.com/lab/dimensions/window.innerWidth
和window.innerHeight
为您提供尺寸,包括滚动条;document.documentElement.clientWidth
和document.documentElement.clientHeight
为而不包括window.scrollTo()
的文档如下:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo
正如bryguy所说,您可以计算屏幕的中心并使用scrollTo()。或者,如果您有一个要滚动到的特定元素,请为该元素指定一个id,然后使用scrollIntoView()函数。您还可以将一个不可见的div居中,绝对定位div,并将顶部和左侧的值设置为50%:
HTML
<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>
JS-
window.onload = function() {
document.getElementById('scrollToMe').scrollIntoView();
};
您可以在没有jQuery的情况下完成此操作。您可以使用本地JavaScript函数window.scrollTo()
滚动到中心。
要计算屏幕的中心,你所要做的就是:
对于垂直中心
- 确定视口的高度:视口的高度存储在
document.documentElement.clientHeight
中 - 确定整个文档的高度:可以使用
document.documentElement.offsetHeight
或document.body.scrollHeight
来获取整个文档的宽度 - 计算:现在只需从文档高度中减去视口高度,然后将其一分为二,如下所示:
(document.documentElement.offsetHeight - document.documentElement.clientHeight)/2
对于水平中心
- 确定视口的宽度:视口的宽度存储在
document.documentElement.clientWidth
中 - 确定整个文档的宽度:您可以使用
document.body.scrollWidth
来完成此操作 - 计算:现在只需从文档宽度中减去视口宽度,然后将其一分为二,如下所示:
(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.dococumentElement.clientHeight(和clientWidth),它们为您提供了不带滚动条的视口大小。如果你想包括滚动条,你必须使用其他变量。你可以在互联网上找到如何获得这些测量值的例子。
更多信息:在浏览器中居中一页水平滚动的网站(不居中一个div)