单击定位链接并保持页面位置/防止页面跳至顶部？

Question

I've seen variants of this question asked on SO previously, but these all concern anchors that point nowhere (ie, href="#") or are placeholders for some javascript. My situation is different in that my anchors DO point somewhere, eg,

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

More specifically, they interact with a css gallery that advances the main image each time a thumbnail or the image itself is clicked, as below. What I would like to do is have this occur without the default 'target = top' behaviour of 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>

Whilst I have seen many javascript solutions to this, they all deactivate the link functionality in so doing.

I should say that while I'm happy to have a js / jquery solution, I am not looking to change my html / css navigation for javascript / jquery -- I wish navigation to remain operative for those who use Noscript.

Can anyone help -- with a demonstrably working solution?

NB I've tried 'scroll-sneak' ( http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/ ) but it has zero documentation and is notoriously difficult to get working.

UPDATED the js that captures the url hash to switch thumbnail opacity (to match gallery navigation) can be seen working, but for the scroll-sneak element, at http://www.ddsol.net/soDavePage/page/testFixed.htm

Answer 1

Scroll Sneak

Here's a method that implements scroll sneak. There's a slight flickering in Firefox 3 due to the small delay in the browser firing the scroll event, but it works as requested.

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

Another Update

It's become a mission now. This is a slight modification of the second version; I think that considering the only problem was that the image wasn't showing, this will likely address that.

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

Second Update

This should operate exactly as you wanted, just replace the script you currently have. It flips between the gallery images, dims the correct thumbnail, prevents page navigation and stops the page from jumping to the element while still changing the document hash. Here's a fiddle to demo http://jsfiddle.net/C2B2M/ ; it's missing the images, I didn't want to hot-link to your site.

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

Update

Here's another attempt and also a fiddle for you to try it out. 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("#", ""));
        }
    });
});

This snippet captures any hash links and removes the id of the destination element long enough to change the page hash and then resumes the event propagation. I think that may be what your gallery is using to change the images, this script shouldn't stop the event itself from bubbling.

Previous

This should work for you

$("div.thumbs a").on("click", function(e){ if ($(this).attr("href").match(/^#/)) e.preventDefault(); });