如何在HTML页面上的特定点打开网站



初学者,如果这真的很明显,请道歉!

如何让我的网站在页面上的特定点打开(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,但如果你想要屏幕中间的位置,你可能需要调整一下。你必须得到屏幕的视口并做一些数学运算。

(提示:window.innerWidthwindow.innerHeight为您提供尺寸,包括滚动条;document.documentElement.clientWidthdocument.documentElement.clientHeight而不包括


window.scrollTo()的文档如下:https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

有关视口尺寸的一些信息可以在此处找到:http://ryanve.com/lab/dimensions/

正如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.offsetHeightdocument.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)

相关内容

  • 没有找到相关文章

最新更新