单击定位链接并保持页面位置/防止页面跳至顶部? [英] Click anchor link and keep page position / prevent page-jump to top?

问题描述

我之前曾在SO上看到过此问题的变体，但这些都与无处指向的锚点(即href =#")有关，或者是某些javascript的占位符.我的处境不同，因为我的锚点指向某个地方，例如

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

更具体地说，它们与css画廊进行交互，该画廊每次单击缩略图或图像本身时都会使主图像前进，如下所示.我想做的是在没有href的默认"target = top"行为的情况下发生这种情况.

<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解决方案，但我不希望更改javascript/jquery的html/css导航-我希望导航对于那些使用Noscript的人仍然有效./p>

任何人都可以提供可证明的可行解决方案吗?

我已经尝试过'scroll-sneak'( http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/)，但是它的文档数量为零，而且众所周知很难上班.

已更新捕获url哈希以切换缩略图不透明度(以匹配图库导航)的js可以正常工作，但对于滚动偷偷摸摸的元素，请访问解决方案

滚动隐藏

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

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

<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?

N.B. 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

解决方案

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

这篇关于单击定位链接并保持页面位置/防止页面跳至顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！