Question

我一直试图制作javascript代码＆＃39;滚动潜行＆＃39; （http://mrcoles.com/blog/scroll-sneak-maintain-position-between-page-loads/）现在工作了几个星期。此代码会停止“跳转”页面。单击锚链接时（在顶部），并且不会禁用该链接的功能。当点击下方表格行中的导航链接时，我希望页面不会移回到顶部。它适用于开发人员的演示页面，但没有太多记录。解决这个问题的任何人？

<tr id="tabs">

<th><a href="index.htm">Information</a></th>

<th><a href="plan.htm">Research</a></th>

<th><a href="councils.htm">Sources</a></th>

<th><a href="university.htm">Institution</a></th>

<th><a href="contact.htm">Contact</a></th>

</tr>

<script>
(function() {
var sneaky = new ScrollSneak(location.hostname), tabs = 
document.getElementById('tabs').getElementsByTagName('th'), i = 0, len = tabs.length;
for (; i < len; i++) {
tabs[i].onclick = sneaky.sneak;
}
    document.getElementById('next').onclick = sneaky.sneak; 
})();
</script>

更新

就我原来的问题而言（考虑到下面评论中描述的各种问题和错误，接受的答案证明行为太不可预测），我设法找到一个简单的解决方案，如下所示，适用于IE6， FF3，QZ6和Webkit 537.21。

(function() {
var sneaky = new ScrollSneak(location.hostname);
document.getElementById('tabs').onclick = sneaky.sneak;
})();

Answer 1

再修改一次：

如果最后一张图片仍然给您带来麻烦，您可以进行此更改并查看是否有帮助：

替换它：

$(active).show();
$(active).siblings().hide();

有了这个：

$("#gallery-interior li").hide(0, function(){
        $("#gallery-interior " + active).show();
});

<强>上

在这里，我结合了另一个答案的脚本和标签的滚动标记。我在FF3中进行了测试并验证它们是否正常工作，这是完整的JavaScript：

var sneaky = new ScrollSneak("scrolltrack");

$(document).ready(function() {

    var urlHash = window.location.hash;

    if(urlHash) {
        $(".thumbs a[href='" + urlHash + "'] img").addClass("dimmed");
    } else {
        $(".thumbs a:first-child img").addClass("dimmed");
    }

    $("#tabs th a").on("click", function(e) {
        sneaky.sneak();
    });

    $(".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");
    $(active).show();
    $(active).siblings().hide();
}

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

<强>上

在这里，此脚本适用于选项卡。在我为图库（Click anchor link and keep page position / prevent page-jump to top?）发布的解决方案中，页面跳转发生，因为哈希链接实际上没有重新加载页面并且默认情况下滚动并且必须撤消。这对于普通链接没有相同的跳跃效果，但是我还能够捕获哈希链接以备不时之需。最好将它放在站点HTML的底部，就在关闭正文标记之前。

var sneaky = new ScrollSneak("tabs", false);
var capture = true;

$(document).ready(function() {

    var urlHash = window.location.hash;

    $("#tabs th a").on("click", function(e) {
        sneaky.sneak();
        capture = true;
    });

    capture = false;

});

window.onscroll = function () {
    if (capture) sneaky.scroll(), capture = false; // This part is only needed for hash links
};

制作'滚动潜行'的作品

1 个答案: