Question

我之前已经看过这个问题的变体，但是这些都涉及无处不在的锚点（即，href =＆＃34;＃＆＃34;）或者是某些javascript的占位符。我的情况不同，我的锚点指向某处，例如，

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

更具体地说，它们与css库交互，每次点击缩略图或图像本身时都会使主图像前进，如下所示。我想要做的是在没有默认＆＃39; target = top＆＃39; href的行为。

<div id="gallery">
<ul id="gallery-interior">

<li id="one"><img src="../images/details.jpg" usemap="#gallerymap" ><map name="gallerymap">
<area shape="circ" coords="429,157,30" href="#two"></map></li>
</ul>
</div>

<div class=' thumbs'>
<a href="#one"><img src="../images/details.jpg">
</div>

虽然我已经看到了很多这方面的JavaScript解决方案，但它们都会在这样做时停用链接功能。

我应该说虽然我很高兴有一个js / jquery解决方案，但我不打算改变我的html / css导航的javascript / jquery - 我希望导航对于那些使用Noscript的人来说仍然有效

任何人都可以帮忙 - 有一个明显有效的解决方案吗？

N.B。我已经尝试过滚动潜行了＃39; （http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/）但它没有文档，而且很难开始工作。

更新了捕获url哈希以切换缩略图不透明度（以匹配图库导航）的js可以看到工作，但对于scroll-sneak元素，在http://www.ddsol.net/soDavePage/page/testFixed.htm

Answer 1

Scroll Sneak

这是一个实现滚动潜行的方法。由于浏览器触发滚动事件的延迟很小，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(); });

点击锚点链接并保持页面位置/阻止页面跳转到顶部？

1 个答案: