点击锚点链接并保持页面位置/阻止页面跳转到顶部？
我之前已经看到过这个问题的变体，但是这些都涉及无处可寻的锚点（即，href =“＃”）或者是某些javascript的占位符。 我的情况不同，我的锚点指向某个地方，例如，
更具体地说，它们与css库交互，每当点击缩略图或图像本身时，css库就会使主图像前进，如下所示。 我想要做的是在没有href的默认’target = top’行为的情况下发生这种情况。
虽然我已经看到了很多这方面的JavaScript解决方案，但它们都会在这样做时停用链接function。
我应该说虽然我很高兴有一个js / jquery解决方案，但我不打算改变我的html / css导航的javascript / jquery – 我希望导航对于那些使用Noscript的人来说仍然有用。
任何人都可以帮助 – 一个明显有效的解决方案？
NB我曾尝试’滚动潜行’（ http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/ ），但它没有文档，并且很难开始工作。
更新了捕获url哈希以切换缩略图不透明度（以匹配图库导航）的js可以看到工作，但对于scroll-sneak元素，请访问http://www.ddsol.net/soDavePage/page/testFixed.htm
滚动潜行
这是一个实现滚动潜行的方法。 由于浏览器触发滚动事件的延迟很小，Firefox 3中有轻微的闪烁，但它可以按要求工作。
var sneaky = new ScrollSneak("gallery", false); var capture = true; $(document).ready(function() { var urlHash = window.location.hash; $(".thumbs a").on("click", function(e) { sneaky.sneak(); capture = true; dimThumbs($(this).attr("href")); }); $("#gallery-interior area").on("click", function(e) { sneaky.sneak(); capture = true; dimThumbs($(this).attr("href")); }); if(urlHash) { dimThumbs(urlHash); } else { $(".thumbs a:first-child img").addClass("dimmed"); // Dim first thumbnail } capture = false; }); window.onscroll = function () { if (capture) sneaky.scroll(), capture = false; }; window.onbeforeunload = function () { sneaky.sneak(); }; function dimThumbs(active) { $(".thumbs a img").removeClass("dimmed"); $(".thumbs a[href='" + active + "'] img").addClass("dimmed"); }
另一个更新
现在它已成为一项使命。 这是对第二个版本的略微修改; 我认为考虑到唯一的问题是图像没有显示，这可能会解决这个问题。
$(document).ready(function() { var urlHash = window.location.hash; if(urlHash) { setTimeout(function() { $("body").scrollTop(0) }, 1); // Scroll to top. changeImage(urlHash); } else { $(".thumbs a:first-child img").addClass("dimmed"); // Dim first thumbnail } $(".thumbs a").on("click", function(e) { changeImage($(this).attr("href"), e); }); $("#gallery-interior area").on("click", function(e) { changeImage($(this).attr("href"), e); }); }); function changeImage(active, e) { var e = window.event || e; preventNav(active, e); $(".thumbs a img").removeClass("dimmed"); $(".thumbs a[href='" + active + "'] img").addClass("dimmed"); $("#gallery-interior li").hide(0, function(){ $("#gallery-interior " + active).show(); }); } function preventNav(hash, e) { if (e) { if (typeof e.preventDefault != 'undefined') { e.preventDefault(); } else { e.returnValue = false; } } var node = $(hash); node.attr("id", ""); document.location.hash = hash; node.attr("id", hash.replace("#", "")); }
第二次更新
这应该完全按照您的意愿运行，只需替换您当前拥有的脚本即可。 它会在图库图像之间翻转，使正确的缩略图变暗，阻止页面导航并阻止页面跳转到元素，同时仍然更改文档哈希。 这是演示http://jsfiddle.net/C2B2M/的小提琴; 它缺少图像，我不想热链接到您的网站。
$(document).ready(function() { var urlHash = window.location.hash; if(urlHash) { setTimeout(function() { $("body").scrollTop(0) }, 1); // Scroll to top. changeImage(urlHash); } else { $(".thumbs a:first-child img").addClass("dimmed"); // Dim first thumbnail } $(".thumbs a").on("click", function(e) { changeImage($(this).attr("href"), e); }); $("#gallery-interior area").on("click", function(e) { changeImage($(this).attr("href"), e); }); }); function changeImage(active, e) { preventNav(active, e); $(".thumbs a img").removeClass('dimmed'); // Wipe out all dims $(".thumbs a[href='" + active + "'] img").addClass("dimmed"); // Dim the current thumbnail $("#gallery-interior li").hide(); // Hide all gallery images $("#gallery-interior " + active).show(); // Show current image } function preventNav(hash, e) { if (e) e.preventDefault(); var node = $(hash); node.attr("id", ""); document.location.hash = hash; node.attr("id", hash.replace("#", "")); }
更新
这是另一种尝试，也是你尝试它的小提琴。 http://jsfiddle.net/EPsLV/4/
$(function () { $("a").on("click", function(e){ var hash = $(this).attr("href"); if (hash.match(/^#\w+/g)) { e.preventDefault(); var node = $(hash); node.attr("id", ""); document.location.hash = hash; node.attr("id", hash.replace("#", "")); } }); });
此片段捕获任何哈希链接并删除目标元素的ID足够长的时间以更改页面哈希，然后恢复事件传播。 我认为这可能是你的画廊用来改变图像的东西，这个剧本不应该阻止事件本身冒泡。
以前
这应该适合你
$("div.thumbs a").on("click", function(e){ if ($(this).attr("href").match(/^#/)) e.preventDefault(); });