Javascript 单击锚定链接并保持页面位置/防止页面跳转到顶部？

我在前面看到过这个问题的变体，但这些都涉及到指向任何地方的锚（即href=“#”）或是某些javascript的占位符。我的情况不同，我的锚确实指向某个地方，例如

<a href="#one"><img src="../images/details_thumb.jpg">

）但它没有文档，而且众所周知很难工作

更新了捕获url哈希以切换缩略图不透明度（以匹配图库导航）的js，但是对于滚动隐藏元素，在
滚动隐藏



下面是一个实现滚动隐藏的方法。Firefox3中有一个轻微的闪烁，这是因为浏览器触发滚动事件的延迟很小，但它可以按要求工作

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("#", ""));
}

第二次更新



这应该完全按照您想要的方式操作，只需替换您当前拥有的脚本即可。它在库图像之间翻转，使正确的缩略图变暗，阻止页面导航，并阻止页面跳转到元素，同时仍然更改文档哈希。这里有一把小提琴演示；它缺少图像，我不想热链接到你的网站

$(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("#", ""));
}



更新

这是另一个尝试，也是一把小提琴让你尝试一下

此代码段捕获任何散列链接，并删除目标元素的id，时间足够长，可以更改页面散列，然后恢复事件传播。我认为这可能是你的画廊用来更改图像的，这个脚本不应该阻止事件本身冒泡



以前的

这应该对你有用

$（“div.thumbs a”）。在（“单击”上，函数（e）{
if（$（this.attr（“href”）.match（/^#/）
e、 预防默认值（）；
});
谢谢，但它不起作用。这就是为什么我要求一个“…一个明显有效的解决方案”，例如，在小提琴中，因为我在前两个例子中问过这个问题，但所有建议都不起作用。使用此选项时，库的链接是否完全停止工作？这个jQuery专门针对gallery导航链接。链接继续工作，但脚本似乎没有影响——默认的滚动到顶部行为不受影响。安装了JQuery。我认为这应该正是您所需要的。它经过测试，似乎工作正常。感谢您的详细回复；由于你的提琴脚本可以工作，但在我的代码中仍然没有，我更新了这个问题，发布了一个到live gallery的链接，显示了其他js代码（由SO成员“Spanka”提供），该代码将gallery链接到thumbs。我不知道两者之间的交互是否是问题所在，但无论哪个脚本先运行，结果都是一样的。
$(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("#", ""));
}

$(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("#", ""));
        }
    });
});