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

【问题标题】：How to open website at specific point on page in HTML?如何在 HTML 页面上的特定点打开网站？
【发布时间】：2015-04-22 14:32:03
【问题描述】：

如果这真的很明显，初学者程序员非常抱歉！

如何让我的网站在页面上的特定位置打开（HTML 格式）？

我在任何地方都找不到这叫什么！ 不是锚等。该网站将比大多数屏幕更宽、更长。 我希望屏幕/视口在 2500x2500 像素背景的正中心打开。

我在 Mac OS X 10 上的 DreamWeaver CC 中工作

提前致谢！！

p.s 没有可发布的代码，这是我将其放在一起的第一个停靠点

【问题讨论】：

标签： javascript html navigation mouse dreamweaver

【解决方案1】：

您可以使用 $(window).width() 和 $(window).height() 获取客户端屏幕，这是 jQuery 代码，因此您必须在网页上的 jQuery 库中添加一个应答器脚本。你能告诉我更多关于你想做的事情吗？我很难理解。你不想要任何锚，但你想要？不理解的道歉。

【讨论】：

【解决方案2】：

尝试在页面加载时触发这段 Javascript

window.onload = function(){
    window.scrollTo(1250, 1250);
}

window.scrollTo(x-coord,y-coord) 函数有两个参数，x-coord 是要显示在左上角的文档横轴的像素，y-coord 是要显示的文档纵轴的像素显示在左上角。

我选择了 1250，因为它是 2500 除以 2，但如果您想要屏幕中间的那个位置，您可能需要稍微调整一下。您必须获取屏幕的视口并进行一些数学运算。

（提示：window.innerWidth & window.innerHeight 为您提供包括滚动条的尺寸；document.documentElement.clientWidth 和 document.documentElement.clientHeight 是没有滚动条的） p>

window.scrollTo() 的文档在这里：https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo

关于视口尺寸的一些信息可以在这里找到：http://ryanve.com/lab/dimensions/

【讨论】：

【解决方案3】：

正如 bryguy 所说，您可以计算屏幕中心并使用 scrollTo()。或者，如果您想要滚动到某个特定元素，请给该元素一个 id 并使用 scrollIntoView() 函数。您还可以将不可见的 div 居中，将 div 绝对定位并将顶部和左侧的值设置为 50%：

HTML

<div id="scrollToMe" style="position: absolute; top: 50%; left: 50%;"></div>

window.onload = function() {
    document.getElementById('scrollToMe').scrollIntoView();
};

【讨论】：

【解决方案4】：

你可以在没有 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），它们为您提供了没有滚动条的视口大小。如果您希望包含滚动条，则必须使用其他变量。您可以在互联网上找到有关如何获取这些测量值的示例。

【讨论】：