2012-02-02 77 views
1

第一次溢出堆栈。链接时防止滚动重置?

我正在制作一个网页,其中包含几个相同的html页面,除了它们包含不同的图像,这些图像的大小几乎相同 - 以及它们是如何命名的,通过它们的jpg功能。

图片看起来很棒,但我有一个300像素的标题,将它们向下推动>迫使你向下滚动以查看完整图像。这是所有这些图库页面的共享CSS内置的。

我在图片下面有简单的文字链接,它们被硬编码为指向图库中的下一张图片。 (我有一个列表显示20个图像)。当有人点击图像时,它会转到该页面并将滚动重置到顶部,这会使标题将图像区域向下推。

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

回答

0

没有使用像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

+0

是的,我添加了一个锚,并停止滚动。非常稳固,谢谢。我正在显示400kb的图像,所以根据我的需要,加载时间并不是太多。最终,当我能够掌握服务器端脚本时,我会创建一个更高效的网站库。在这一点上,我正在寻找一砖一瓦建造东西,但本土的。我有一个平面设计背景,所以我可以通过图形来掩饰其简单性。 – user1152532 2012-02-02 23:34:19

+0

很高兴听到它的作品:) – 2012-02-03 03:03:23

0

你可以有一个页面,只需更换图像? http://www.quirksmode.org/dom/fir.html

当然,如果您有某种类型的照片库,您当然可以更改“上一个/下一个”按钮系统的功能。

请发布更多信息。

+0

感谢您的信息。 – user1152532 2012-02-02 23:35:27

0

你希望你的链接看起来像这样:

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

,你想给你的图像的ID在这种情况下=“秘诀”。

看看这个小提琴看到一个例子。唯一的区别是你的href会像上面发布的代码一样在那里存放网址的其余部分。

http://jsfiddle.net/QgzsL/

+0

感谢您的回答。 – user1152532 2012-02-02 23:28:47