链接时防止滚动重置？

Question

第一次溢出堆栈。

我正在创建一个网站，其中有几个相同的html页面，除了它们包含大小相同或多或少相同的不同图像的事实 - 以及它们如何被它们所特有的jpg命名。

这些图片在网站上看起来很棒，但我有一个300像素的标题，将它们向下推>强制您向下滚动以查看完整图像。这内置于所有这些图库页面的共享CSS中。

我在图像下方有简单的文字链接，这些图像是硬编码的，指向图库中的下一个图像。 （我有一个显示的20个图像的列表）。当有人点击图像时，它会转到该页面并将滚动重置到顶部，这会使标题向下推动图像区域。

有谁能告诉我如何防止新链接的滚动重置行为？

Answer 1

你可以有一个页面而只是替换图像？ http://www.quirksmode.org/dom/fir.html

当然，您现在可以将功能更改为“上一个/下一个”按钮系统，假设您有某种类型的照片库。

请发布更多详情。

Answer 2

您希望您的链接看起来像这样：

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

并且你想在这种情况下给你的图像一个id =“tips”。

看看这个小提琴看一个例子。唯一的区别是你的href将包含其余的url，就像上面发布的代码一样。

http://jsfiddle.net/QgzsL/

Answer 3

如果不使用jQuery这样的内容，您可以链接页面，使得每个页面上的图像上方都有<a name="gallery"></a>等锚标记，并在提供各个页面的链接时添加#gallery到<a href="next_image.html#gallery">Next Image</a>等网址。然而，这在每个页面上都是重复的，并且不会产生健壮的网页。你将来希望改变一些事情，这将导致问题和进一步的工作，所以我会考虑一个动态的替代方案。

请注意，这看起来不像jQuery那样无缝，并且在需要时使用AJAX加载图像。或者更好的是，由于大多数JS库工作，首先将图像加载到页面中，然后使用JS将它们显示在链接点击上。这样做的好处是您可以使用提供的图像在JS中生成链接。如果图像足够大以至于可能导致页面加载滞后，请考虑制作某种占位符图像。无论如何，请查看lightbox 2。

此外，我没有感觉您使用任何服务器端脚本来创建此库。如果js解决方案不适合您，或者您发现根据当时的内容需求自动生成部分网站的额外好处，请查看使用PHP，Python，Ruby等内容。如果它只是一个你想要的简单网站，一个很好的解决方案可能是Wordpress。